摘要:介紹把用最新標準編寫的代碼向下編譯成可以在今天隨處可用的版本。這主要是根據(jù)委員會發(fā)布流程來制定的。最終在階段被標準正式采納。也就是說這些包含的特性是比更新的特性但還未被寫入標準進行發(fā)布。
Babel-loader介紹
Babel 把用最新標準編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本。 這一過程叫做“源碼到源碼”編譯, 也被稱為轉換編譯。安裝
npm i babel-loader -D
package.json 配置文件
"babel-core": "^6.26.0", // 核心包 "babel-loader": "^7.1.2", // 基礎包 "babel-preset-env": "^1.6.1", // 根據(jù)配置轉換成瀏覽器支持的 es5 "babel-plugin-transform-runtime": "^6.23.0", //promise的轉換 "babel-preset-react": "^6.24.1", //react語法的轉換 "babel-plugin-import": "^1.6.3", // import的轉換 "babel-preset-stage-0": "^6.24.1", //babel-preset-stage-0 打包處于 strawman 階段的語法)
接下來 我詳細解釋一下這些配置的作用:
babel-loader的配置.babelrc
在我們告訴 Babel 該做什么之前,你需要做的就是在項目的根路徑下創(chuàng)建 .babelrc 文件。然后輸入以下內容作為開始:
{ "presets": [], "plugins": [] }
babel-preset-env
如果使用babel-preset-es2015,es2016,es2017包含了過多在某些情況下不需要的功能.
但使用babel-preset-env, 我們可以聲明環(huán)境, 然后該preset就會只編譯包含我們所聲明環(huán)境缺少的特性的代碼,因此也是比較推薦的方式。
安裝babel-preset-env
npm i babel-preset-env
添加配置
{ "presets": ["env"] }
指定所要支持的瀏覽器
指定支持主流瀏覽器最新的兩個版本以及IE 7+:
"presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "ie >= 7"] } } ] ]
支持超過市場份額5%的瀏覽器:
"targets": { "browsers": "> 5%" }
某個固定版本的瀏覽器:
"targets": { "chrome": 56 }
更多配置參考官方文檔:
babel-preset-stage-x
官方預設(preset), 有兩種,一個是按年份(babel-preset-2017),一個是按階段(babel-preset-stage-0)。 這主要是根據(jù)TC39 委員會ECMASCRPIT 發(fā)布流程來制定的。TC39 委員會決定,從2016年開始,每年都會發(fā)布一個版本,它包括每年期限內完成的所有功能,同時ECMAScript的版本號也按年份編制,就有了ES2016, ES2017。所以也就有了babel-present-2016, babel-preset-2017, 對每一年新增的語法進行轉化。babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了。
最終在階段 4 被標準正式采納。
以下是4 個不同階段的(打包的)預設:
babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3
注意 stage-4 預設是不存在的因為它就是上面的 es2017 預設。
以上每種預設都依賴于緊隨的后期階段預設,數(shù)字越小,階段越靠后,存在依賴關系。也就是說stage-0是包括stage-1的,以此類推。也就是說這些stage包含的特性是比latest更新的特性但還未被寫入標準進行發(fā)布。
使用的時候只需要安裝你想要的階段就可以了:
$ npm install --save-dev babel-preset-stage-2
然后添加進你的 .babelrc 配置文件。但是要注意如果沒有提供es2017相關的預設,preset-stage-X 這種階段性的預設也不能用。
babel-runtime
babel-polyfill解決了Babel不轉換新API的問題,但是直接在代碼中插入幫助函數(shù),會導致污染了全局環(huán)境,并且不同的代碼文件中包含重復的代碼,導致編譯后的代碼體積變大。 (比如:上述的幫助函數(shù)_defineProperty有可能在很多的代碼模塊文件中都會被插入)
Babel為了解決這個問題,提供了多帶帶的包babel-runtime用以提供編譯模塊的工具函數(shù), 啟用插件babel-plugin-transform-runtime后,Babel就會使用babel-runtime下的工具函數(shù),上述的代碼就會變成這樣
與 babel-polyfill 一樣,babel-runtime 的作用也是模擬 ES2015 環(huán)境。只不過,babel-polyfill 是針對全局環(huán)境的,引入它,我們的瀏覽器就好像具備了規(guī)范里定義的完整的特性 – 雖然原生并未實現(xiàn)。 babel-runtime 更像是分散的 polyfill 模塊,我們可以在自己的模塊里多帶帶引入,比如 require(‘babel-runtime/core-js/promise’) ,它們不會在全局環(huán)境添加未實現(xiàn)的方法,只是,這樣手動引用每個 polyfill 會非常低效。我們借助 Runtime transform 插件來自動化處理這一切。 通過安裝 babel-plugin-transform-runtime 和 babel-runtime 來開始。 ``` $ npm install --save-dev babel-plugin-transform-runtime $ npm install --save babel-runtime ``` 然后更新 .babelrc: ``` { "plugins": [ "transform-runtime" ] } ```webpack 中定義 babel-loader
很少有大型項目僅僅需要 babel,一般都是 babel 配合著 webpack 或 glup 等編譯工具一起上的。
為了顯出 babel 的能耐,個人配用 babel-runtime 、支持 react 的webpack.config.js
先來配使用 babel-runtime 的:
首先安裝:
npm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-plugin-react-transform webpack --save-dev
npm install babel-runtime --save
然后配置:
module: { loaders: [{ loader: "babel", test: /.jsx?$/, include: path.join(__dirname, "src"), query: { plugins: ["transform-runtime"], presets: [ ["env", { "targets": { "chrome": 52 }, "modules": false, "loose": true }], "stage-2", "react" ], } }] }babel-cli
abel 的 CLI 是一種在命令行下使用 Babel 編譯文件的簡單方法。
讓我們先全局安裝它來學習基礎知識。
$ npm install --global babel-cli
我們可以這樣來編譯我們的第一個文件:
$ babel my-file.js
這將把編譯后的結果直接輸出至終端。使用 --out-file 或著 -o 可以將結果寫入到指定的文件。
$ babel example.js --out-file compiled.js # 或 $ babel example.js -o compiled.js
如果我們想要把一個目錄整個編譯成一個新的目錄,可以使用 --out-dir 或者 -d。.
$ babel src --out-dir lib # 或 $ babel src -d lib參考文章
《https://segmentfault.com/a/11...》
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://systransis.cn/yun/103121.html
摘要:目錄第課安裝和第課配置文件第課做為的一個模塊來使用第課插件篇第課模塊篇第課在開發(fā)中使用本文參考文檔官方模塊配置模塊配置中文翻譯模塊配置中文翻譯版本官方內置清單第三方清單代碼托管及用法配置官方文檔模塊總覽我是首頁萬事開頭 webpack目錄 第1課: 安裝webpack和webpack-dev-server 第2課: 配置文件 第3課: 做為node的一個模塊來使用 第4課: ...
摘要:關于模板的有好幾種。一次安裝所有的大家可以了解一些的用法把編譯成。安裝參考文檔功能將源文件遷移到指定的目錄,返回新的文件路徑。安裝用法它會將所有的入口中引用的移動到和頁面對應的獨立分離的文件。 webpack是需要自己編寫自己需要的一個配置對象,取決你如何使用webpack,下面指定了所有的可用的配置選項。參考文檔:https://doc.webpack-china.org... we...
摘要:在項目架構中這兩個東西基本成為了標配,但的模塊必須在使用前經(jīng)過的構建后文稱為才能在瀏覽器端使用,而每次修改也都需要重新構建后文稱為才能生效,如何提高的構建效率成為了提高開發(fā)效率的關鍵之一。 0. 前言 showImg(https://segmentfault.com/img/remote/1460000005770045); 圖1:ES6 + Webpack + React + Bab...
摘要:我發(fā)布了我的第一個組件,一個基于的標簽云組件。然后將這個編譯命令寫到里,如下那么以后要編譯下面的代碼,只需要執(zhí)行現(xiàn)在我們已經(jīng)有編譯好的代碼了,接下來就可以發(fā)布到供其他人使用了。 我發(fā)布了我的第一個 npm 組件,一個基于 react 的 3d 標簽云組件。在這途中我也是遇到了很多的坑,花在完善整個發(fā)布流程的時間遠多于寫這個組件本身的時間,所以我記錄下我覺得一個正常的 react 組件的...
閱讀 3503·2021-10-18 13:30
閱讀 2954·2021-10-09 09:44
閱讀 1972·2019-08-30 11:26
閱讀 2305·2019-08-29 13:17
閱讀 768·2019-08-29 12:17
閱讀 2256·2019-08-26 18:42
閱讀 481·2019-08-26 13:24
閱讀 2963·2019-08-26 11:39