Sublime插件支持Sass編譯和Babel解析ES6 & .sublime-build文件初探

用Sublime Text蠻久了，配置配來配去的，每次換電腦都得重頭再配過，奈何人老了腦子不中用了，得好好整理一些，下次換電腦就有得參考了.. 同事說，他的WebStorm簡直太方便，自身集成了很多方便的工具，不用配置太多哈哈哈哈但我還是更喜歡用ST 如果要將Sass編譯成css文件，安裝相應的編 ...

用Sublime Text蠻久了，配置配來配去的，每次換電腦都得重頭再配過，奈何人老了腦子不中用了，得好好整理一些，下次換電腦就有得參考了..

同事說，他的WebStorm簡直太方便，自身集成了很多方便的工具，不用配置太多

哈哈哈哈但我還是更喜歡用ST

如果要將Sass編譯成css文件，安裝相應的編譯工具就行，然後在命令行直接sass a.scss:b.css 編譯就行了

要將ES6解析成ES5的語法形式，同樣的安裝好babel工具，命令行執行 babel a.js -o b.js 即可

但始終是要先打開命令行手動打命令，略為麻煩，對此可以使用相應的 watch 參數來監聽文件的改變，即時編譯

但更好的方案似乎是：不用另外打開cmd命令行，直接即時地在編輯器/IDE中解析編譯

搭飛機前往：Sass支持 Babel支持 Sublime-build 其他小tips

一、Sass支持

要讓ST支持Sass，第一步應該是支持Sass的語法，Ctrl+Shift+P --> install --> Sass 安裝Sass插件

第一個是語法渲染的支持，下麵那個就是 Sass Build 。也安裝了，用來編譯成CSS

（其實Sass Build插件的實現不難，下方會稍微介紹；要實現編譯，首要的條件是機子本身已經配好了Sass環境，插件做的只是調用）

安裝好這個插件之後，將Scss文件保存後，按快捷鍵 Ctrl+B 即可將其編譯成CSS文件，預設路徑為當前目錄下

看看Tools下的Build System，可以發現多了兩個build配置，即為Sass Build工具提供的，第一個為簡單地編譯，第二個在編譯之後還進行了壓縮

想選下麵那個，可以手動勾選，或者想編譯時按快捷鍵 Ctrl+Shift+B 選擇選項即可

預設是CSS文件被解析到當前目錄下，我們可以自定義路徑或文件名

點擊新建一個New Build System，放上這個配置

{

    "cmd": ["sass", "--update", "${file_base_name}.scss:./css/${file_base_name}.css", "--style", "expanded"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "windows":
    {
        "shell": "true"
    }

}

cmd中即為命令與參數的結合，類似一般的Sass編譯命令，通過使用一些內置的變數，我們就能自定義CSS文件的生成路徑及文件名

很好，能在ST編輯器中好好編譯了，但還缺了點什麼。目前保存文件之後還得手動按快捷鍵編譯

再裝個插件 SublimeOnSaveBuild ，提供保存即執行命令的支持

裝好插件之後最好重啟一下ST，然後保存文件時，即可按照你Build System中的配置，執行配置中的命令

可以看看它的配置信息

{
    "filename_filter": "\\.(css|js|sass|less|scss)$",
    "build_on_save": 1
}

定義了對某些文件進行監聽，如果不想保存時即構建，就將值設為0即可（註意，作者對Default選項設為了只讀，想更改就在User配置項中更改覆蓋即可）

二、Babel支持

一般使用Babel解碼器將ES6語法解析成ES5語法，在ST編輯器中裝個插件 babel-sublime 即可支持Babel

這個插件首先識別了ES6或JSX的語法形式進行渲染，其次還特別建議使用這個主題插件做更好的代碼著色

除此之外，它還提供了Babel的轉碼，不過這個功能有些缺陷。先看其配置項

註意要將這裡的路徑配好，設置成環境變數的路徑，讓插件可以在次尋找 babel或babel-core 命令，否則就會報錯 Couldn't find babel or babel-core

然後，類似在命令行中執行babel命令的前提：先在當前目錄配置好.babelrc文件，定義轉碼規則，在當前目錄放置好依賴包（因為這裡找不到全局的）

比如我使用了三個規則，就在當前路徑下npm 裝好 babel-preset-es2015、babel-preset-react、babel-preset-stage-3

{
    "presets": [
        "es2015",
        "react",
        "stage-3"
    ],
    "plugins": []
}

然後在es6.js下快捷鍵Ctrl+Shift+P，輸入babel，選擇 babel transform 執行即可

如果順利的話，就能看到es6文件已經轉換為es5語法，然而然而，只是生成了匿名文件，不符合我們的預期

我已經查了很久，始終不知道應該在哪裡設置生成文件的路徑，所以這是個大缺陷呀，況且還得另外打命令

所以，自己配置Build選項吧，類似Sass那樣

要註意的是，我們的目標：要智能，在Scss文件下保存就即時編譯成CSS文件，在ES6語法文件下保存就即時解析成ES5語法格式

三、sublime-build

所以還是先好好去看 Sublime-build的文檔吧

在這裡，首要關註三個配置就行

1. cmd 上文好像已經提過了，其實就是一般的命令拼接

2. selector 可用來智能過濾，即在匹配的文件才執行該build規則

前提是開啟了自動匹配的規則，即

如上文提到的SASS的build配置，匹配到才執行

"selector": "source.sass, source.scss",

為瞭解析ES6語法，現在就來新建一個Build選項，輸入內容，保存該.sublime-build文件至相應目錄下

{

    "cmd": ["babel", "${file_base_name}.js", "-o", "./es5/${file_base_name}.js"],
    "selector": "source.js",
    "line_regex": "Line ([0-9]+):",

    "windows":
    {
        "shell": "true"
    }
}

比如這裡，匹配了*.js文件才執行cmd中的命令，命令中自定義了路徑與文件名，規則類似一般的babel命令規則

在SCSS文件下保存和JS文件下保存，觸發的build命令是不同的

如果只想在這兩種文件保存時才觸發build規則，在 SublimeOnSaveBuild 的配置中配置一下即可

"filename_filter": "\\.(css|js|sass|less|scss)$",

3. variants

就是說通過這個配置，我們可以在一個Build選項中定義不同的命令，在構建時我們可以自行選擇，比如我加入這麼一段variants 配置

{

    "cmd": ["babel", "${file_base_name}.js", "-o", "./es5/${file_base_name}.js"],
    "selector": "source.js",
    "line_regex": "Line ([0-9]+):",

    "windows":
    {
        "shell": "true"
    }
    ,

    "variants": [
        {
            "name": "one",
            "cmd": ["echo", "one"],
            "shell": true
        },
        {
            "name": "two",
            "cmd": ["echo", "two"]
        }
    ]

}