@babel/polyfill和@babel/plugin-transform-runtime区别与使用

@babel/polyfill和@babel/plugin-transform-runtime区别与使用

特别说明

本次讨论是基于webpack4 在以下版本中进行讨论

• “@babel/core”: “^7.11.4”
• “@babel/polyfill”: “^7.10.4”
• “@babel/plugin-transform-runtime”: “^7.11.0”

简介

如果在开发中，使用ES6的语法，会导致一些旧版的浏览器无法运行，这时候我们就可以借助Babel这个平台来帮助我们将高版本的语法转为低版本的语法如（ES6 -> ES5）。
但是，Babel的转换分为两部分syntax（let, const等） 和 api（Promise, include等）。Babel仅对syntax进行了转换，对于api的转换我们需要借助以上两个插件来实现。

@babel/polyfill

安装babel

npm install --save-dev babel-loader @babel/core

安装babel/polyfill

npm install --save @babel/polyfill

配置webpack.config.js

module.exports = {
	module: {
	    rules: [
	      {
	        test: /\.js$/,
	        exclude: /node_modules/, // 不对这个目录进行编译
	        loader: "babel-loader"
	      }
	    ]
}

新建并配置.babelrc

在根目录中新建 .babelrc 这个文件。

{
  "presets": [
    [
       // babel的编译预设 
      "