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

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

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

安裝Babel

$ npm install -g babel

好了，沒(méi)什么好說(shuō)的。

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

$ npm install -g babel@5.8.20

創(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 的代碼測(cè)試下了，下面是運(yùn)行效果。

mac 效果

win 效果

運(yùn)行失敗處理

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

Sublime Text 以下簡(jiǎn)稱 st

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

一. 環(huán)境變量

如果執(zhí)行不了，而是報(bào)錯(cuò)，錯(cuò)誤類似 xxx babel-node: command not found 這樣的，那么就是環(huán)境變量的問(wè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)境變量了，所以不需要考慮這樣的問(wèn)題。

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

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

st2不正常 st3正常

三. 中文用戶名 (僅win)

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

st2不正常 st3正常

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

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

我就糾結(jié)了，打開了他原先的配置，粗略看來(lái)都一樣，調(diào)試了幾次后發(fā)現(xiàn)問(wè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í)比較長(zhǎng)，或者死循環(huán)的時(shí)候，你再次執(zhí)行，可以自動(dòng)結(jié)束之前的進(jìn)程，這樣就免去了我們手動(dòng)關(guān)閉進(jìn)程的麻煩。

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

好了，來(lái)看下完整的例子。

{
    "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 還是中文用戶，中文路徑，都支持。

后記

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

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