使用 babel 编译 js 为 es5 支持 ie

使用 babel 编译 js 为 es5 支持 ie

• 概念
• 编译普通 js 文件支持 ie11
• 编译 vue2.x/vue-cli4.x 支持 ie11

概念

• Babel 可以做以下事情
  • 语法转换
  • 添加缺失的 api, 通过 polyfill 模块, 例如 core-js 去实现

入门

源代码 src/main.js.

new Promise(async () => {
  await console.log(234);
})

安装 babel 相关工具

# 安装 babel
cnpm i -D @babel/core@7.14.6 @babel/cli@7.14.5 @babel/preset-env@7.14.7

# 安装 polyfill
cnpm i -S core-js@3.15.2

编写 babel 配置 babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        ie: "11"
      },
      useBuiltIns: "usage", 
      corejs: "3.15.2",
    },
  ],
];

module.exports = { presets };

编译和测试

# 编译
npx babel src --out-dir dist

# 测试
node dist/main.js

编译 vue2.x/vue-cli4.x 支持 ie11
安装 core-js cnpm i -S core-js@3.15.2 , 然后在入口文件中添加以下代码:

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

然后在 package.json 中添加以下配置:

"browserslist": [
  "IE 11"
],
"babel": {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.15.2"
      }
    ]
  ]
},

参考

• https://www.babeljs.cn/docs/
• https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

  注意

  • 默认使用 .browserslistrc 文件来指定 targets.
  • useBuiltIns 选项
    • usage 通过 @babel/preset-env 和 browserslist 配置来自动引入 polyfill 以减少体积, 但是源码中有某个依赖使用了其他的特殊 api 时, 默认情况下 Babel 无法将其检测出来.
    • entry 根据 browserslist 目标导入所有 polyfill. 体积较大但不用担心依赖.
    • false 不自动添加 polyfill.
  • corejs 选项
    • 建议指定次要版本，否则”3”将被解释为”3.0”可能不包含最新功能的 polyfill.
  • 安装 core-js 即可, 不用单独安装 regenerator-runtime

​