vue中babel-polyfill的使用方法

为什么使用babel-polyfill

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题。

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。Babel 默认不转码的 API 非常多，详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

有些浏览器版本的发布早于ES6的定稿和发布，因此如果在编程中使用了ES6的新特性，而浏览器没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器就会无法识别ES6代码，例如IE9根本看不懂代码写的let和const是什么东西？只能选择报错，这就是浏览器对ES6的兼容性问题；

为了完整使用 ES6 的 API ，我们可以使用 babel-polyfill 这个插件：

npm install -save-dev babel-polyfill

或

npm install --save @babel/polyfill

然后，在需要使用的文件的顶部引入

import "babel-polyfill"

或

import "@babel/polyfill";

node.js 中：

require('babel-polyfill');

webpack.config.js 中：

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

或

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

babel-polyfill的相关优化推荐博客

1. 按需加载babel-polyfill

参考文献

1. https://www.babeljs.cn/docs/babel-polyfill