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 的旧版本，则文件名为 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
npm install --save-dev @babel/preset-env

真实配置

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 两个版本
  //     }
  //   ]
  // ]
};

ie10以下遇到的问题

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'
  ],

视频学习地址，黑马教育https://www.bilibili.com/video/BV15741177Eh?p=82&spm_id_from=pageDriver