阅读 200

使用 babel 编译 js 为 es5 支持 ie(babel编译原理)

  • 概念

  • 编译普通 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"       }     ]   ] }, 复制代码

参考

  • www.babeljs.cn/docs/

  • cli.vuejs.org/zh/guide/br…

注意

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


作者:程序媛李李李李李蕾
链接:https://juejin.cn/post/7028801679898181662


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐