爲何要用babel-polyfill

1.爲何要用babel-polyfill

Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。舉個栗子，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。若是想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。

 

2.安裝

npm install babel-polyfill -S

由於是一個 polyfill （它須要在你的源代碼以前運行），咱們須要讓它成爲一個 dependency，而不是一個 devDependency

 

3.在 Node / Browserify / Webpack 中使用

你須要在你的應用入口頂部經過 require 將 polyfill 引入進來。確保它在任何其餘代碼/依賴聲明以前被調用！

require("babel-polyfill");

若是你在你的應用入口使用 ES6 的 import 語法，你須要在入口頂部經過 import 將 polyfill 引入，以確保它可以最早加載：

import 'babel-polyfill';

在 webpack.config.js 中，將 babel-polyfill 加到你的 entry 數組中：

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

 

4.在瀏覽器中使用

能夠在 babel-polyfill npm 發佈版中的 dist/polyfill.js 文件中找到它。 它須要在你編譯過的 Babel 代碼以前被包括進去。你能夠將它追加到你編譯過的代碼中，或者在這些代碼以前經過 <script> 引入它。

注意： 不要經過相似 browserify 等手段來 require 它，用 babel-polyfill

 

5.備註

Babel默認不轉碼的API很是多，詳細清單能夠查看 babel-plugin-transform-runtime模塊的 definitions.js

參考：https://www.babeljs.cn/docs/usage/polyfill/