es6中babel的用法介紹（程式碼範例）

這篇文章帶給大家的內容是關於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="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/969/215/708/1543218509651832.png?x-oss-process=image/resize,p_40" class="lazy" 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="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/632/246/621/1543218556955012.png?x-oss-process=image/resize,p_40" class="lazy" 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="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/426/987/944/1543218573788604.png?x-oss-process=image/resize,p_40" class="lazy" 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中文網其他相關文章！