使用 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
- 默认使用