摘要:,下一代編譯器,當前版本,它可以處理的所有新語法,并內(nèi)置了擴展及類型注解支持,如果對不是很了解可以查看實驗室微信公眾號文章煦涵說。
Babel,下一代javascript編譯器,當前版本 v2.4.0 ,它可以處理ES6的所有新語法,并內(nèi)置了React JSX擴展及Flow類型注解支持,如果對Flow不是很了解可以查看FED實驗室微信公眾號文章煦涵說Flow。
Babel與JavaScript技術(shù)委員會(TC39)始終保持著高度一致,能夠在ECMAScript新特性標準化之前為開發(fā)者提供現(xiàn)實可用的轉(zhuǎn)碼編譯實現(xiàn),以在ECMAScript規(guī)范最后定稿前獲得來自世界各地開發(fā)者更多的反饋,從而間接推動了javascript的發(fā)展以及開發(fā)者在項目中嘗試使用新技術(shù)。因此建議大家開始使用 Babel。
Babel 配置文件 .babelrc學習和使用Babel的第一步,配置 .babelrc 文件,該文件存放到項目根目錄下,用來設置 Babel 的轉(zhuǎn)碼規(guī)則和插件?;靖袷饺缦拢?/p>
{ "presets": [], "plugins": [] }
presets的規(guī)則集如下:
# replaces es2015, es2016, es2017, latest $ yarn add babel-preset-env --dev # es2015 $ yarn add babel-preset-es2015 --dev # es2016 $ yarn add babel-preset-es2016 --dev # es2017 $ yarn add babel-preset-es2017 --dev # react $ yarn add babel-preset-react --dev # flow $ yarn add babel-preset-flow --dev # The TC39 categorizes proposals into the following stages: # # Stage 0 - Strawman: just an idea, possible Babel plugin. # Stage 1 - Proposal: this is worth working on. # Stage 2 - Draft: initial spec. # Stage 3 - Candidate: complete spec and initial browser implementations. # Stage 4 - Finished: will be added to the next yearly release. # For more information, be sure to check out the current TC39 proposals and its process document. # # The TC39 stage process is also explained in detail across a few posts by Yehuda Katz (@wycatz) over at thefeedbackloop.xyz: # Stage 0 and 1, Stage 2, Stage 3, and Stage 4 coming soon. $ yarn add babel-preset-stage-x --dev
plugins插件集合很多。
新建一個配置文件 .babelrc,并增加如下代碼,以供我們下面調(diào)試使用:
# 新建配置文件.babelrc,并添加如下內(nèi)容 # { # "presets": ["es2015"], # "plugins": [] # } $ touch .babelrc # 安裝 babel-preset-es2015 $ yarn add babel-preset-es2015 --dev安裝和使用 Babel
ps: 本文將使用Yarn來安裝依賴相關(guān)npm包,如果不了解Yarn的歡迎閱讀公眾號專欄煦涵說Yarn。命令行方式運行 babel-cli
babel-cli 的 CLI 是一種在命令行下使用 Babel 編譯文件的簡單方法。
全局安裝# 全局安裝 $ yarn global add babel-cli
新建一個source.js文件,內(nèi)容如下:
var arr = [1, 2, 3, 4]; arr = arr.map((item, index) => { return item * index; }); console.log(arr);
# 輸出結(jié)果到控制臺 $ babel source.js # 輸出結(jié)果到文件 $ babel source.js --out-file dist.js or $ babel source.js -o dist.js # 輸出結(jié)果到目錄 $ babel /src --out-dir /dist or $ babel /src -d /dist項目內(nèi)安裝(局部安裝)
# 初始化一個項目package.json $ mkdir first-babel-proj $ cd first-babel-proj $ yarn init $ yarn add babel-cli --dev
修改package.json,添加如下文本
{ "name": "babel-proj", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "babel-cli": "^6.24.1" }, + "scripts": { + "build": "babel src -d dist" + } }
運行
$ yarn run buildrequire方式運行 babel-register
ps: 這種方法并不適合正式產(chǎn)品環(huán)境使用。 在部署到生成環(huán)境之前預先編譯會更好。 不過用在構(gòu)建腳本或是其他本地運行的腳本中是非常合適的。
$ yarn add babel-register --dev
新建compile.js文件
require("babel-register"); require("./src/source.js");
運行
node compile.js
運行結(jié)果
$ [0, 2, 6, 12]編程方式運行 babel-core
$ yarn add babel-core --dev
字符串形式的 JavaScript 代碼可以直接使用 babel.transform 來編譯。
babel.transform("code();", options); // => { code, map, ast }
如果是文件的話,可以使用異步 api:
babel.transformFile("filename.js", options, function(err, result) { result; // => { code, map, ast } });
或者是同步 api:
babel.transformFileSync("filename.js", options); // => { code, map, ast }
要是已經(jīng)有一個 Babel AST(抽象語法樹)了就可以直接從 AST 進行轉(zhuǎn)換。
babel.transformFromAst(ast, code, options); // => { code, map, ast }
更多選項 options.
Babel 與 Webpack使用 babel-loader 插件
$ yarn add bable-loader --dev
webpack.config.js 配置文件增加如下規(guī)則:
{ test: /.js$/, loader: "babel-loader" }Babel 低版本瀏覽器兼容
可參考:
煦涵說webpack-IE低版本兼容指南,或者FED實驗室公眾號文章
React - IE低版本兼容
感謝您的閱讀
--eof--
作者[煦涵]
2017年06月03日
下面是「FED實驗室」的微信公眾號二維碼,歡迎長按、掃描關(guān)注:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/83317.html
摘要:,是一個前端資源加載打包工具,現(xiàn)在版本已經(jīng)到,今天的文章不支持介紹的及使用,而是對最近項目開發(fā)中使用打包時處理低版本及以下瀏覽器兼容問題做一次總結(jié)。 Webpack,Webpack 是一個前端資源加載/打包工具,現(xiàn)在版本已經(jīng) release 到 v2.6.1,今天的文章不支持介紹Webpack的API及使用,而是對最近項目開發(fā)中使用Webpack打包時處理IE低版本(IE8及以下)瀏覽...
閱讀 3349·2021-09-30 09:47
閱讀 2732·2021-08-18 10:22
閱讀 2518·2021-08-16 10:49
閱讀 2884·2019-08-30 15:53
閱讀 2732·2019-08-29 16:14
閱讀 3185·2019-08-28 18:18
閱讀 3229·2019-08-26 13:21
閱讀 787·2019-08-26 12:02