记录vue使用bable将es6转译为es5

为什么使用babel

ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

babel使用

1. 运行以下命令安装所需的包（package）：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2.在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本），并将以下内容复制到此文件中：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

上述浏览器列表仅用于示例。请根据你所需要支持的浏览器进行调整。参见 此处 以了解 @babel/preset-env 可接受哪些参数。

如果你使用的是 Babel 的旧版本，则文件名为 babel.config.js。

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets };

3.插件和预设（preset）

代码转换功能以插件的形式出现，插件是小型的 JavaScript 程序，用于指导 Babel 如何对代码进行转换。你甚至可以编写自己的插件将你所需要的任何代码转换功能应用到你的代码上。例如将 ES2015+ 语法转换为 ES5 语法，我们可以使用诸如 @babel/plugin-transform-arrow-functions 之类的官方插件：

npm install --save-dev @babel/plugin-transform-arrow-functions

现在，我们代码中的所有箭头函数（arrow functions）都将被转换为 ES5 兼容的函数表达式了：

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

这是个好的开始！但是我们的代码中仍然残留了其他 ES2015+ 的特性，我们希望对它们也进行转换。我们不需要一个接一个地添加所有需要的插件，我们可以使用一个 “preset” （即一组预先设定的插件）。

就像插件一样，你也可以根据自己所需要的插件组合创建一个自己的 preset 并将其分享出去。J对于当前的用例而言，我们可以使用一个名称为 env 的 preset。

npm install --save-dev @babel/preset-env

如果不进行任何配置，上述 preset 所包含的插件将支持所有最新的 JavaScript （ES2015、ES2016 等）特性。但是 preset 也是支持参数的。我们来看看另一种传递参数的方法：配置文件，而不是通过终端控制台同时传递 cli 和 preset 的参数。

配置

根据你的需要，可以通过几种不同的方式来使用配置文件。另外，请务必阅读我们关于如何 配置 Babel 的深入指南以了解更多信息。

其实vue 已经引入了babel， 检查package.json是否有依赖 @vue/cli-plugin-babel，只需要配置babel.config.js 和 package.json里添加下面代码

package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "Chrome 40.0", // 兼容低版本谷歌
    "ie >= 9"  // 兼容ie 9
  ]

.babel.config.js

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    }
  }
}

实践

1.在main.js中引入 ,一定要在最顶部引入

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

2.babel.config.js 配置

module.exports = {
  presets: [
    // '@vue/cli-plugin-babel/preset',
    [
      // '@babel/preset-env',
      '@vue/app',
      {
        modules: 'commonjs',
        useBuiltIns: 'entry',//entry usage
        corejs: "3",
        debug:true
      }
    ]
  ],
  sourceType: 'unambiguous'
  // "plugins": [
  //   [
  //     "@babel/plugin-transform-runtime",
  //     {
  //       "corejs": 3 // 指定 runtime-corejs 的版本，目前有 2 3 两个版本
  //     }
  //   ]
  // ]
};

ie中遇到的问题

1.因为webstorm格式化会在最后一个属性后面加一个，导致ie不兼容。用eslint 格式化配置将最后一个逗号去掉。
在.eslintrc.js中加入

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    'prettier/prettier': [
      process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      {
        singleQuote: true,
        semi: false,
      },
    ],
    "comma-dangle": [1, "never"] // 这里就是格式化最后一个逗号
  },
};

2.因为项目中用到了sm4等加密方式，babel并没有将依赖转义为es5。所以我们还要再加一个配置，让babel转译我们的依赖。
在vue.config.js中加入配置项

transpileDependencies: [
    'sm-crypto',
    'bpmn-js',
    'bpmn-js-properties-panel',
    'diagram-js',
    'bpmn-moddle',
    '@bpmn-io',
    '@bpmn-io/element-templates-validator'
  ],