Sublime Text 之運行 ES6 (基於babel)

時間 2019-11-30

標籤 sublime text 運行 es6 基於 babel 欄目 HTML 简体版

原文原文鏈接

直接進入正文吧。javascript

安裝Babel

1	$ npm install -g babel

好了，沒什麼好說的。java

建立Sublime Text編譯系統

選擇菜單Tools –> Build System –> new Build System…node

中文版的話是工具 –> 編譯系統 –> 新建編譯系統…linux

而後寫以下配置：es6

{
    "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，保存位置默認便可。shell

好了，如今你能夠寫 es6 的代碼測試下了，下面是運行效果。npm

mac 效果windows

win 效果babel

運行失敗處理

固然也有運行不了的狀況，不過大致就分爲下面2種。工具

一. 環境變量

若是執行不了，而是報錯，錯誤相似xxx babel-node: command not found這樣的，那麼就是環境變量的問題。
只要添加下node和babel-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 默認就添加到環境變量了，因此不須要考慮這樣的問題。