Sublime Text 之运行 ES6 (基于babel)

发表于 | 分类于 | 评论数：

之前在博客园里写过一篇《Sublime Text 之运行 js 方法》，这篇算是续篇了，因为就是改个字符串而已。

直接进入正文吧。

安装Babel

1
$ npm install -g babel

好了，没什么好说的。

由于babel发布了第6版本后，安装babel无效，官方提示安装babel-cli，但运行时错误，暂时不知道怎么处理，所以安装老版本先。 

1
$ npm install -g babel@5.8.20

创建Sublime Text编译系统

选择菜单 Tools –> Build System –> new Build System…

中文版的话是 工具 –> 编译系统 –> 新建编译系统…

然后写如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "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，保存位置默认即可。

好了，现在你可以写 es6 的代码测试下了，下面是运行效果。

mac

mac 效果

win

win 效果

运行失败处理

当然也有运行不了的情况，不过大体就分为下面几种情况。

Sublime Text 以下简称 st

  • Sublime Text 2 为 st2
  • Sublime Text 3 为 st3

一. 环境变量

如果执行不了，而是报错，错误类似 xxx babel-node: command not found 这样的，那么就是环境变量的问题。
只要添加下 node 和 babel-node 的路径到环境变量里。

如果是mac下，我推荐添加 path 属性到你的 javascript.sublime-build 里，会更方便。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "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 下就可以运行了。 win 下安装 node 默认就添加到环境变量了，所以不需要考虑这样的问题。

二. 含有中文路径 (仅win)

当路径里出现中文的时候，win 下什么都不会输出，好奇怪，我也不知道为什么，但 mac 下可以正常运行。
他们唯一区别只是环境字符集一个默认是 gbk，一个是 utf-8，难道只是这个问题？
如果有哪位大神知道，还望指点一二。

st2不正常 st3正常

三. 中文用户名 (仅win)

如果你的系统用户名是中文的，我指的是系统登录的用户名，如果是中文的，那么怎么都运行不了，奇怪了。
一开始我以为是 C:\Users\用户名\AppData\Roaming\npm 这个问题，但是我修改了 npm 安装目录，问题依旧。
暂时没想到好的处理方法，最直接有效的解决方法就是换英文用户名。

st2不正常 st3正常

四. 支中文用户+中文路径 (仅st3)

目前为止，几个朋友向我反应了运行失败的情况，没有中文路径，不是中文用户名，依然运行失败。
我远程调试了问题最多，最爱问莫名其妙问题的 @淫狐 同学的机子。
他是 win10+st3，英文用户名，英文名路径，遇到的错误是 “文件名、目录名或卷标语法不正确”。
更奇怪的是，他说之前能运行js的，但是安装 babel 却不能运行 es6。

我就纠结了，打开了他原先的配置，粗略看来都一样，调试了几次后发现问题就出在 cmd: 的参数写法上。
st2 可以合并为一行写参数，而 st3 却不支持，只能拆开写。

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

之前，我们是这么写的，现在要改成这样。

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

或者干脆这样。

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

这样就可以兼容 st3 了，而且支持中文用户名，支持路中文路径。
至于为什么要加是 taskkill /f /im node.exe >nul 2>nul，是因为当脚本耗时比较长，或者死循环的时候，你再次执行，可以自动结束之前的进程，这样就免去了我们手动关闭进程的麻烦。

如果你本地要用 node 跑任务的，比如 gulp watch 之类的，那就不要加这了，否则你的任务就会被关掉。
所以，有得必有失，看情况取舍吧。

好了，来看下完整的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "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，这个兼容 ST3 不论是 win mac 还是中文用户，中文路径，都支持。

后记

折腾了几天，终于大致解决了所有问题，简单说 st2 在 win 下只要有中文路径，或者中文用户，就无法运行，st3 则不受干扰，所以 st2 用户可以考虑升级 st3。

其实我知道为什么用 st2，因为只有 st2 是 100% 汉化，st3 只有菜单汉化。我 win 上是 st2 汉化的，mac 上是 st3 英文的，由于习惯了，所以所有东西都知道怎么操作，现在来说，汉不汉化都无所谓了。反而升级 st3 不会遇到奇葩bug。