首頁 >web前端 >js教程 >es6中babel的用法介紹(程式碼範例)

es6中babel的用法介紹(程式碼範例)

不言
不言轉載
2018-11-26 15:55:372426瀏覽

這篇文章帶給大家的內容是關於es6中babel的用法介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

polyfill

我們都知道,js總是一直存在著相容性問題,雖然其他語言也存在著相容性問題,例如c 、java ,但那種相容性是新特性在舊版上的不相容,js則存在著各種奇形怪哉的不相容。這其中有著非常複雜的歷史和時代的原因,並不加以累述。而解決相容性問題的方法以前只存在一種,那就是polyfill。先說什麼是polyfill,例如我們想要用陣列的一個新的方法includes,在較新版本的瀏覽器下,可以直接使用:

es6中babel的用法介紹(程式碼範例)

但是在舊的瀏覽器下,例如ie10,就會報錯:

es6中babel的用法介紹(程式碼範例)

#這種情況下我們可以透過自訂一個方法來解決:

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中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除