@babel/polyfill的踩坑之路

在網頁需要向低版本兼容時，如IE不支持promise等新特性，我們僅僅使用babel進行es5轉換是不夠的，還需要把這些新特性進行轉換

polyfill介紹

有些人不理解@babel/polyfill到底做了什么，以為運行了命令行工具也會將新的api轉換成原有代碼，事實上只是引入了大量的polyfill而已
瀏覽器環境下使用@babel/standalone動態的將ES6轉換成ES5，針對IE11，模塊引用了Object.assign這個新的api,因此需要使用@babel/polyfill。當然，自己寫一個polyfill實現也是可以的。

polyfill作用

Babel 包含一個polyfill 庫。這個庫里包含 regenerator 和 core-js.

這個庫將會模擬一個完全的 ES2015+ 的環境。

這意味著你可以使用 新的內置語法 比如 promise 或者 WeakMap， 靜態方法比如Array.from 或 Object.assign, 實例方法 比如 Array.prototype.includes 和 generator 函數。

使用步驟

1. 安裝必備配置

? 1.1 初始化項目
? npm init -y

? 2.2 安裝babel和webpack
? ? npm install babel-loader@8 @babel/core@7 @babel/preset-env webpack3 ?
?
注意：這里版本要一致。webpack 3.x | babel-loader 8.x | babel 7.x

2. 安裝polyfill

? npm install --save @babel/polyfill
? 這個是在你的source code前運行的，所以安裝的時候是 --save

3 導入polyfill
polyfill 用起來很方便，但是你應該和 @babel/preset-env 以及 useBuiltIns 的option 一起用。如果不這樣做的 話，我們建議你手動引入需要的每個polyfill

? 確保 它在 其他代碼或者 引用前被調用

使用CommonJS導入

require('@babel/polyfill')

或者使用ES6導入**
import '@babel/polyfill'

4. 選擇使用方式

webpack 集成polyfill

和babel配置文件一起用的時候

如果在.babelrc中指定 useBuiltIns: 'usage'的話

那么就不要在webpack.config.js 的 entry array 和source 中包含 @babel/polyfill 了。注意，@babel/polyfill 依然需要安裝

如果在.babelrc 中指定 useBuiltIns: 'entry'的話

那么就要和上面討論的一樣，在你應用的入口文件頂部通過require 或者 import 引入@babel/polyfill

如果在.babelrc 中沒有指定useBuiltIns的值或者useBuiltIns: false

可以直接在webpack.config.js 的 entry array 中添加 @babel/polyfill

module.exports = {
	entry: ['@babel/polyfill','./src/main.js']
}

如果沒有使用babel配置文件.那么就可以像我們上面討論的一樣把@babel/polyfill 添加到webpack 的entry array 中。你也可以直接通過import 或require 把它添加到應用的入口文件頂部。但是我們并不推薦這么做

babel配置文件中.babelrc和babel.config.js的區別

當我們需要用到node_modules進行編譯時，建議用babel.config.js文件來配置

(文中我們使用的是webpack，需要用到node_modules，所以使用babel.config.js配置babel)

當我們只需要配置編譯js不需要其他操作時，可以用.babelrc

babel的文件配置

這里只兼容到IE11，如需要添加其他配置可自行添加

module.exports = function (api) {
  api.cache(true);

  const presets = [
      ["@babel/preset-env", {
        "targets": {
          "chrome": "70",
          "ie": "11"
        },
        "useBuiltIns": false
      }]
  ];

  return {
    presets
  };
}

webpack文件配置

由于轉義時會把所有引用的js一起轉義，而node_modules不需要轉義，所以這里使用exclude進行排除處理

const path = require('path');

module.exports = {
  entry: ['@babel/polyfill','./src/main.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins:[
              "@babel/plugin-transform-runtime",
              "@babel/plugin-proposal-object-rest-spread"
            ]
          }
        }
      }
     ]
   }
};

擴展：細心的小伙伴可能注意到，我的babel配置中還增加了兩個插件plugins，如不需要刪除配置文件即可。

plugin-transform-runtime可重新使用Babel注入的幫助程序代碼以節省代碼大小，也可轉義迭代器。

安裝：

? npm install --save-dev @babel/plugin-transform-runtime

? npm install --save @babel/runtime

配置如上

plugin-proposal-object-rest-spread使用Babel的objectSpread程序生成符合規范的代碼，也可轉義數組解構。

安裝：

? npm install --save-dev @babel/plugin-proposal-object-rest-spread

配置如上

注意事項

babel只會轉換E6語法，而不會轉換新的api，讓新的api生效的方法是使用傳統的polyfill，為此需要引入這個模塊

安裝的時候必須用 --save 保證引用到生產環境而不是開發環境，當然，弄錯了，自己手動在package.json中修改也是可以的。

如果只是測試下瀏覽器環境使用，用script標簽引用模塊下的polyfill.min.js文件，即可實現polyfill的導入，方法如下，但實際使用不建議！

<!-- 引入polyfill 讓es6新的api能夠在ie11上使用 這其實和babel沒什么關系 -->
	<script type="text/javascript" src="./polyfill.min.js"></script>
<!-- 引用@babel/standalone 這個是babel在瀏覽器上使用的模塊 會把ES6轉成ES5 但是它依賴ES6的新api -->
	<script type="text/javascript" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

總結

以上是生活随笔為你收集整理的webpack之polyfill踩坑之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。