Babel詳情可以參照
- 官網(wǎng)https://babeljs.io
- https://babeljs.cn(中文網(wǎng))
現(xiàn)在分享一下Babel 在Mac 上安裝和使用
首先mac 上要安裝Node.JS 和 npm,如未安裝可參照其他文章
1.創(chuàng)建一個(gè)package.json
npm init (回車(chē), 一直下一步即可)
2-安裝 Babel
npm install --save-dev babel-cli
測(cè)試是否安裝成功
./node_modules/.bin/babel --help 查看幫助
3-安裝ECMAScript6/2015 (ES6/ES2015)
npm install --save-dev babel-preset-latest
4-在項(xiàng)目根目錄創(chuàng)建 .babelrc 配置文件
{
"presets": ["latest"]
//或者,二選一
"presets": ["es2015"]
}
5-配置完成后, babel可以把我們es6的語(yǔ)法轉(zhuǎn)換成es5的語(yǔ)法
新建一個(gè)main.js文件
在 main.js 內(nèi)寫(xiě)入一下es6的代碼
var fn = (a,b) => a + b;
6-終端執(zhí)行
./node_modules/.bin/babel main.js(編譯的文件)
執(zhí)行完成可以在終端看到轉(zhuǎn)換后的代碼
上面的流程使用babel來(lái)轉(zhuǎn)換我們代碼, 終端展示的效果
下面的流程使用瀏覽器顯示我們的es6的代碼效果
從Babel 6.0開(kāi)始, 不再直接提供瀏覽器版本, 而是要用構(gòu)建工具構(gòu)建出來(lái). 如果你沒(méi)有或不想使用構(gòu)建工具, 可以通過(guò)安裝5.x版本的babel-core 模塊獲取
1-安裝
npm install babel-core@5
2-編寫(xiě)測(cè)試文件
在跟目錄新建一個(gè)html文件, 比如 index.html
引入 browser.js 和 browser-polyfill.js 兩個(gè)文件, 這兩個(gè)是必須引入的問(wèn)題件
<script src="./node_modules/babel-core/browser.js" type="text/javascript"></script>
<script src="./node_modules/babel-core/browser-polyfill.js" type="text/javascript"></script>
3-另外引入我們編寫(xiě)的es6代碼的js文件
注意: browser.js 是 Babel 提供的轉(zhuǎn)換器腳本, 在引入我們編寫(xiě)的es6的文件時(shí), script 標(biāo)簽的 type 需要是 "text/babel"
<script type="text/babel" src="./main.js"></script>
4-開(kāi)啟一個(gè)瀏覽器服務(wù), 在瀏覽器端顯示效果
browser-sync start --server
在開(kāi)啟一個(gè)服務(wù)器時(shí)候你可能遇到以下兩個(gè)問(wèn)題
1.-bash: browser-sync: command not found
解決方案：
加載該模塊
npm install -g browser-sync
2-運(yùn)行index.html時(shí)候報(bào)錯(cuò) Cross origin requests are only supported for protocol schemes: http, data,chrome-extension, https, chrome-extension-resource.
解決方案：
( 需要替換路徑中的yourname )
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/
參照鏈接:
http://www.cnblogs.com/mackxu/p/cross-domain.html)
這樣你就可以完美運(yùn)行了。
