Vue cli3\4 babel配置转译解决浏览器兼容问题

什么是babel？

babel官网介绍戳戳戳：https://www.babeljs.cn/docs/

Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，
以便能够运行在当前和旧版本的浏览器或其他环境中。

Babel 做的事情：

语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js，实现）
源码转换 (codemods)

主要配置

vue-cli3.x/ 4.x 版本的项目初始化时会引入一个插件，名为@vue/cli-plugin-babel 默认已引入(默认使用 Babel 7 + babel-loader + @vue/babel-preset-app，无需再单独引入babel-loader等转换插件)

在babel.config.js文件默认如下配置：

module.exports = {
 	 presets: [
    	'@vue/cli-plugin-babel/preset'
	]
}

具体步骤如下：
1.需要安装的依赖：

npm i @babel/register @babel/preset-env -D
npm i @babel/polyfill

@babel/plugin-transform-runtime的大多数应用场景是在写第三方库时来使用，这样可以避免影响到使用者的JavaScript环境，造成全局污染。（可不进行安装和babel.config.js里相关配置)

npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime-corejs3

• 在babel.config.js配置如下：

   module.exports = {
   	  presets: [
   	    '@vue/cli-plugin-babel/preset',
   	    [
   	      '@babel/preset-env',
   	      {
   	        'useBuiltIns': 'entry',
   	        'corejs': 3 // 指定 corejs 的版本,如果package.json没有core-js，还需要另外安装
   	      }
   	    ]
   	  ],
   	  "plugins": [ // 如未用到@babel/plugin-transform-runtime可不配置
   	    [
   	      "@babel/plugin-transform-runtime",
   	      {
   	        "corejs": 3 // 指定 runtime-corejs 的版本，目前有 2 3 两个版本
   	      }
   	    ]
   	  ]
   }
  

• 在main.js里引入

   import 'core-js/stable';
   import 'regenerator-runtime/runtime';
  

*此处需注意：babel.config.js配置中的useBuiltIns 的配置，有三个可选项 [false,‘entry’,‘usage’]

• “useBuiltIns”: false - - - 此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill
• “useBuiltIns”: “entry”,“corejs”: 2, - - - 根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。
  需要在入口文件main.js手动添加 import ‘@babel/polyfill’，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。
  如果这里指定 core-js 的版本是 “corejs”: 3, 则main.js中 import ‘@babel/polyfill’ 需要改成上面的方式(即本文使用方式)

4. 默认情况下，babel-loader会忽略所有 node_modules 中的文件，需要利用vue-cli的配置：
   transpileDependencies ---- 转换node-modules必备
   在vue.config.js文件中配置如下：

   module.exports = {
   	......
   	 transpileDependencies: [
   	    /[/\\]node_modules[/\\](.+?)?mapbox(.*)/，
   	    /[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]src/,
   		/[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]package/
   	  ]
   }
   

到此基本完成