這篇文章帶給大家的內容是關於es6中babel的用法介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
polyfill
我們都知道,js總是一直存在著相容性問題,雖然其他語言也存在著相容性問題,例如c 、java ,但那種相容性是新特性在舊版上的不相容,js則存在著各種奇形怪哉的不相容。這其中有著非常複雜的歷史和時代的原因,並不加以累述。而解決相容性問題的方法以前只存在一種,那就是polyfill。先說什麼是polyfill,例如我們想要用陣列的一個新的方法includes,在較新版本的瀏覽器下,可以直接使用:
但是在舊的瀏覽器下,例如ie10,就會報錯:
#這種情況下我們可以透過自訂一個方法來解決:
function includesPolyfill(){ if(!Array.prototype.includes){ Array.prototype.includes=function(element){ for(var i=0; i<this.length><p>這裡定義一個簡單的方法,添加到Array.prototype上,為了簡單,並沒有做太多的異常檢測,接著在程式碼中引入以上方法並優先執行,就可以做到在不相容這個方法的js環境總是直接呼叫Array.protorype.includes方法了:</p> <p><img src="https://img.php.cn//upload/image/969/215/708/1543218509651832.png" title="1543218509651832.png" alt="es6中babel的用法介紹(程式碼範例)"><span class="img-wrap"></span></p> <p><span class="img-wrap"></span>這就是polyfill ,但是polyfill有其局限性,對於可以用舊的方法實現的新特性,可以使用polyfill來解決,例如Array.prototype.includes,但是,對於一些無法使用舊方法實現的新特性、新語法,例如箭頭函數、const之類的,polyfill就無能為力了,這個時候需要用另一種方法:預編譯,或者說是語法轉換。 </p> <p><strong>預編譯</strong></p> <p>在先前的js開發中,是沒有預先編譯這個流程的,擼完js就直接部署了,但是隨著前端工程化的推進,預編譯也就出現了,特別是typescript之類的語言出現以後,編碼和發布就不再是同一種方式了。 </p> <p>現在在發布之前,總是需要打包,而打包有許多的流程,例如資源整合、程式碼最佳化、壓縮混淆...而在其中對程式碼的操作上,我們可以將新的語法轉化成舊的語法來達到對新語法的支援。 </p> <p>簡單的說就是,新語法->編譯器->舊語法。 </p> <p>編譯器的作用就是將輸入的源碼中的新特性轉換成就語法,說白了就是字串處理,例如對箭頭函數的處理:var add=(num1, num2)=>num1 num2 ,這段程式碼在不相容箭頭函數的環境中,例如ie10,是無法執行的</p> <p><img src="https://img.php.cn//upload/image/632/246/621/1543218556955012.png" title="1543218556955012.png" alt="es6中babel的用法介紹(程式碼範例)"><span class="img-wrap"></span></p> <p><span class="img-wrap"></span>但是我們可以透過語法轉換、編譯處理,將原始碼轉換成var add=function(num1, num2){return num1 num2},這樣就可以在不支援箭頭函數的瀏覽器中執行了</p> <p><img src="https://img.php.cn//upload/image/426/987/944/1543218573788604.png" title="1543218573788604.png" alt="es6中babel的用法介紹(程式碼範例)"></p> <p>現在來實作一個簡單的編譯器,當然只支援箭頭函數</p> <pre class="brush:php;toolbar:false">function translate(src){ let [_, name, args, body]=src.match(/\((.+)\)=>(.+)/) return `function ${name}(${args}){return ${body}}` }
為了簡單,只是使用簡單的正則提取來做實驗,並且不做任何異常處理
translate('var add=(num1, num2)=>num1+num') // var add=function(num1, num2){return num1+num2}
將轉換結果儲存成文件,就可以在不相容箭頭語法的環境中使用了。甚至我們可以在瀏覽器中嵌入這個編譯器,將原始碼編譯之後使用Function建構函數或eval來執行,達到執行新語法的作用,這種情況下,稱為運行時編譯器,當然一般不會這麼做。
使用babel
很明顯,不可能自己寫這麼一個編譯器,那還要不要做專案了?這時候只能藉助社群的力量了,babel就是這麼一個東西,接下來將會使用babel來解析箭頭函數
#初始化一個項目
$ mk babel-demo $ cd babel-demo $ npm init -y
安裝babel:
注意: (babel7以後babel相關的函式庫基本上都是放在@babel命名空間下)
$ npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-arrow-functions
@babel/core:核心函式庫
@babel/cli:指令列工具
#@babel/plugin-transform-arrow-functions:箭頭函數語法轉換外掛
#寫程式碼:
var add=(num1, num2)=>num1+num2
使用babel
解析
$ npx babel --plugins @babel/plugin-transform-arrow-functions index.js -o bundle.js
上面指令的意思是將index.js使用babel轉化,並將結果放到bundle.js中,執行之後,將會產生bundle
--plugins:為這次轉化添加插件支援
-o:輸出檔
查看转化结果
查看新生成的bundle.js,可以发现,箭头函数被转化成了普通的funciton, 在任何环境中都支持。
var add = function (num1, num2) { return num1 + num2; };
说明
所以,对于新特性,我们可以通过使用polyfill
,也可以通过语法转化来达到兼容。
babel配置文件
很明显,使用babel cli的局限性很大,容易出错、不直观、繁琐等,所以babel还是支持配置文件的方式:
.babelrc方式
在项目新建.babelrc文件,并使用JSON语法配置
{ "presets": [...], "plugins": [...] }
直接写在package.json的babel节点
{ "name": "my-package", "version": "1.0.0", "babel": { "presets": [ ... ], "plugins": [ ... ], } }
<span style="font-family: 微软雅黑, Microsoft YaHei;">babel.config.js方式</span>
module.exports = function () { const presets = [ ... ]; const plugins = [ ... ]; return { presets, plugins }; }
两种方式大同小异,区别就是一个是动态的,一个是静态的,推荐小项目就用.babelrc,大项目就使用babel.config.js
babel配置之plugin
plugin是babel中很重要的概念,可以说,plugin才是构成babel扩展性的核心,各种各样的plugin构成了babel的生态,可以在这里看一些babel的插件列表。
.babelrc配置文件中配置插件
{ "plugins": ["@babel/plugin-transform-arrow-functions"] }
这时候我们再执行npx babel index.js -o bundle.js,就可以不指定plugin也能正常转化箭头函数了
如果一个plugin可以配置参数,则可以这么配置:
{ "plugins": [ ["@babel/plugin-transform-arrow-functions", { "spec": true }] ] }
babel配置之preset
在一个项目中,我们总是要配置一大堆的插件,这个时候,就是preset出马的时候了,那什么是preset呢?其实就是预置插件列表了,引入了一个preset就包含了一个系列的plugin
比如preset-react就包含了以下插件:
@babel/plugin-syntax-jsx
@babel/plugin-transform-react-jsx
@babel/plugin-transform-react-display-name
.babelrc配置preset-react
{ "presets": ["@babel/preset-react"] }
如果有配置项,就酱:
{ "presets": [ [ "@babel/preset-react", { "pragma": "dom", // default pragma is React.createElement "pragmaFrag": "DomFrag", // default is React.Fragment "throwIfNamespace": false // defaults to true } ] ] }
babel和webpack
添加webpack.config.js
const path=requrie('path') module.exports={ entry:path.resolve(__dirname, 'index.js'), output:{ path: path.resolve(__dirname, 'dist'), filename:'bundle.js' }, module: { rules: [ { test: /\.js$/, use: 'babel-loader' } ] }
- 添加相关依赖
$ npm install --save-dev webpack webpack-cli babel-loader " - `webpack`:`webpack`核心库 - `webpack-cli`:`webpack`命令行工具 - `babel-loader`:`babel`的`webpack loader`
打包
$ npm webpack
查看编译结果
省略无关的东西,可以看到,箭头函数也被转化成了function
/***/ "./index.js": /*!******************!*\ !*** ./index.js ***! \******************/ /*! no static exports found */ /***/ (function(module, exports) { eval("let add = function (num1, num2) {\n return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?"); /***/ }) /******/ });
支持es6
支持es6可以使用@babel/present-env来代替一系列的东西,还有许多的配置像,比如兼容的浏览器版本,具体可以看这里
安装依赖包
$ npm install --save-dev @babel/preset-env
配置
{ "plugins": ["@babel/present-env"] }
打包
$ npm webpack
查看效果
/***/ "./index.js": /*!******************!*\ !*** ./index.js ***! \******************/ /*! no static exports found */ /***/ (function(module, exports) { eval("let add = function (num1, num2) {\n return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?"); /***/ }) /******/ });
总结
这只是babel
功能的一个小览,了解一下babel
的基本使用和一些概念而已。
以上是es6中babel的用法介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!