Sublime Text 之运行 ES6 (基于babel)

本文同步自我的个人博客:http://www.52cik.com/2015/10/21/sublime-text-run-es6.html

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

直接进入正文吧。

安装Babel

$ npm install -g babel

好了,没什么好说的。

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

$ npm install -g babel@5.8.20

创建Sublime Text编译系统

选择菜单 **Tools --> Build System --> new Build System... **

中文版的话是 工具 --> 编译系统 --> 新建编译系统...

然后写如下配置:

{
    "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 这样的,那么就是环境变量的问题。
只要添加下 nodebabel-node 的路径到环境变量里。

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

{
    "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 却不支持,只能拆开写。

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

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

"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,是因为当脚本耗时比较长,或者死循环的时候,你再次执行,可以自动结束之前的进程,这样就免去了我们手动关闭进程的麻烦。

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

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

{
    "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。

posted @ 2015-10-22 15:42  楼教主  阅读(13093)  评论(2编辑  收藏  举报