使用Babel, ESLint
Babel
一個解決舊版瀏覽器或node.js不相容新的js語法的方法,他可以把新語法compile 成相同功能的舊語法,讓舊瀏覽器也可以讀懂
例如:
稍後會講到的ESLint與webpack和現在講到的babel一樣都有一個配置文件,
類似一個菜單,寫好後交給程式,之後程式即可知道我們想要他其中的哪些功能
格式類似如下
上面的presets部分裡面會包含一些我們想讓babel有能力compile哪些版本的js新功能
例如:
但記得寫在babel描述檔babel.rc
文件內的presets
要先安裝好他的npm套件才有效果
Babel工具
1.Babel-cli 一個命令列工具
我們先安裝 npm install -g babel-cli
接著安裝 npm i --save-dev babel-preset-es2015
新增一個.babelrc
文件
並在test1.js輸入
在命令列輸入 babel test1.js -o test2.js
即會產生一個轉碼後的檔案test2.js
Babel還包含其他相關工具,這裡只稍微簡略介紹大概概念,其他可參考其官網,另外開發程式時babel可以與後面介紹的webpack搭配,將在稍後介紹
https://babeljs.io/docs/setup/
ESLint
功能:定義一套程式碼規則,例如每段程式開頭幾個空格,或是逗點後要空一格等等,這些定義規則一樣會寫成一份文件,之後可搭配編輯器的plugin使用
我們會先寫一份.eslintrc
檔案,上面定義了你寫要開啟它些規則,讓他偵測你的程式碼是否符合這些規則
用處:用來檢查code的語法
1.安裝
2.配置
看到上面的rules的數字,對照下表,以上面為例,意思是對所有出現quotes(引號)的地方要使用double(兩個引號),強制性為1(只產生警告訊息)
其他rules可參考官網
如何執行?
也可使用別人寫好的lint
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
安裝編輯器的插件
在插件搜尋eslint即可
使用sublime+ESLint
進入sublime的package manage(需先安裝)
輸入
參考至 http://jonathancreamer.com/setup-eslint-with-es6-in-sublime-text/
Last updated