本文同步自我的個(gè)人博客：http://www./2015/10/21/sublime-text-run-es6.html

之前在博客園里寫過一篇《Sublime Text 之運(yùn)行 js 方法》,，這篇算是續(xù)篇了,，因?yàn)榫褪歉膫€(gè)字符串而已,。

直接進(jìn)入正文吧,。

安裝Babel

$ npm install -g babel

好了,，沒什么好說的,。

由于babel發(fā)布了第6版本后,，安裝babel無效，官方提示安裝babel-cli,，但運(yùn)行時(shí)錯(cuò)誤,，暫時(shí)不知道怎么處理，所以安裝老版本先,。

$ npm install -g [email protected]

創(chuàng)建Sublime Text編譯系統(tǒng)

選擇菜單 Tools --> Build System --> new Build System...

中文版的話是 工具 --> 編譯系統(tǒng) --> 新建編譯系統(tǒng)...

然后寫如下配置：

{
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node \"$file\""]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    }
}

接著保存為 javascript.sublime-build,，保存位置默認(rèn)即可。

好了,，現(xiàn)在你可以寫 es6 的代碼測試下了,，下面是運(yùn)行效果。

mac 效果

win 效果

運(yùn)行失敗處理

當(dāng)然也有運(yùn)行不了的情況,，不過大體就分為下面幾種情況,。

Sublime Text 以下簡稱 st

• Sublime Text 2 為 st2
• Sublime Text 3 為 st3

一. 環(huán)境變量

如果執(zhí)行不了，而是報(bào)錯(cuò),，錯(cuò)誤類似 xxx babel-node: command not found 這樣的,，那么就是環(huán)境變量的問題。
只要添加下 node 和 babel-node 的路徑到環(huán)境變量里,。

如果是mac下，我推薦添加 path 屬性到你的 javascript.sublime-build 里,，會(huì)更方便,。

{
    "path": "/usr/local/bin",
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node \"$file\""]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    }
}

就類似這樣，mac 下就可以運(yùn)行了,。 win 下安裝 node 默認(rèn)就添加到環(huán)境變量了,，所以不需要考慮這樣的問題。

二. 含有中文路徑 (僅win)

當(dāng)路徑里出現(xiàn)中文的時(shí)候,，win 下什么都不會(huì)輸出,，好奇怪，我也不知道為什么，但 mac 下可以正常運(yùn)行,。
他們唯一區(qū)別只是環(huán)境字符集一個(gè)默認(rèn)是 gbk,，一個(gè)是 utf-8，難道只是這個(gè)問題,？
如果有哪位大神知道,，還望指點(diǎn)一二。

st2不正常 st3正常

三. 中文用戶名 (僅win)

如果你的系統(tǒng)用戶名是中文的,，我指的是系統(tǒng)登錄的用戶名,，如果是中文的，那么怎么都運(yùn)行不了,，奇怪了,。
一開始我以為是 C:\Users\用戶名\AppData\Roaming\npm 這個(gè)問題，但是我修改了 npm 安裝目錄,，問題依舊,。
暫時(shí)沒想到好的處理方法，最直接有效的解決方法就是換英文用戶名,。

st2不正常 st3正常

四. 支中文用戶+中文路徑 (僅st3)

目前為止,，幾個(gè)朋友向我反應(yīng)了運(yùn)行失敗的情況，沒有中文路徑,，不是中文用戶名,，依然運(yùn)行失敗。
我遠(yuǎn)程調(diào)試了問題最多,，最愛問莫名其妙問題的 @淫狐 同學(xué)的機(jī)子,。
他是 win10+st3，英文用戶名,，英文名路徑,，遇到的錯(cuò)誤是 "文件名、目錄名或卷標(biāo)語法不正確",。
更奇怪的是,，他說之前能運(yùn)行js的，但是安裝 babel 卻不能運(yùn)行 es6,。

我就糾結(jié)了,，打開了他原先的配置，粗略看來都一樣,，調(diào)試了幾次后發(fā)現(xiàn)問題就出在 cmd: 的參數(shù)寫法上,。
st2 可以合并為一行寫參數(shù)，而 st3 卻不支持,，只能拆開寫,。

"cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node \"$file\""]

之前,，我們是這么寫的，現(xiàn)在要改成這樣,。

"cmd": ["taskkill", "/f", "/im node.exe", ">nul", "2>nul", "&", "babel-node", "$file"]

或者干脆這樣,。

"cmd": ["babel-node", "$file"]

這樣就可以兼容 st3 了，而且支持中文用戶名,，支持路中文路徑,。
至于為什么要加是 taskkill /f /im node.exe >nul 2>nul，是因?yàn)楫?dāng)腳本耗時(shí)比較長,，或者死循環(huán)的時(shí)候,，你再次執(zhí)行，可以自動(dòng)結(jié)束之前的進(jìn)程,，這樣就免去了我們手動(dòng)關(guān)閉進(jìn)程的麻煩,。

如果你本地要用 node 跑任務(wù)的，比如 gulp watch 之類的,，那就不要加這了,，否則你的任務(wù)就會(huì)被關(guān)掉。
所以,，有得必有失,，看情況取舍吧。

好了,，來看下完整的例子,。

{
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill", "/f", "/im", "node.exe", ">nul", "2>nul", "&", "babel-node", "$file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    }
}

{
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill", "/f", "/im", "node.exe", ">nul", "2>nul", "&", "babel-node", "$file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    }
}

OK，這個(gè)兼容 ST3 不論是 win mac 還是中文用戶,，中文路徑,，都支持。

后記

折騰了幾天,，終于大致解決了所有問題,，簡單說 st2 在 win 下只要有中文路徑，或者中文用戶,，就無法運(yùn)行,，st3 則不受干擾，所以 st2 用戶可以考慮升級 st3,。

其實(shí)我知道為什么用 st2,，因?yàn)橹挥?st2 是 100% 漢化，st3 只有菜單漢化,。我 win 上是 st2 漢化的，mac 上是 st3 英文的,，由于習(xí)慣了,，所以所有東西都知道怎么操作，現(xiàn)在來說，漢不漢化都無所謂了,。反而升級 st3 不會(huì)遇到奇葩bug,。