bebel学习总结

最新更新时间：2021年11月24日20:32:13

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：babel

babel-preset-env带来的改变

• 从2017年开始，babel-preset-es2015、babel-preset-es2016、babel-preset-es20**等包均已被babel-preset-env取代

1、旧项目升级

• 更新项目依赖

npm uninstall --save-dev babel-preset-es2015
npm install --save-dev babel-preset-env@next

• 修改babel配置

//.babelrc || babel.config.js
{
  "presets": [ "env" ]
}

2、使用babel-preset-env的额外配置

• 目前 targets 中支持了几乎所有主流运行时环境，其中就包括了 IE、Chrome、Firefox、Opera、Edge、Safari、iOS Safari、Android、Node 和 Electron 等

//浏览器应用 可以通过targets来适配(项目运行时)浏览器的版本
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}
//node应用 可以通过targets来适配(项目运行时)node的版本
{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10||current"
      }
    }]
  ]
}

.babelrc和babel.config.json

• 优先级：babel.config.json < .babelrc
• babel7以上支持两种形式的配置，…babelrc.json是旧方式，babel.config.js是新方式
• .babelrc.json将逐步被废弃，请使用babel.config.js
• babel.config.js会影响整个项目中的代码，包含node_modules中的代码
• 全局配置 (babel.config.js)
• 局部配置 (.babelrc) ，可以在项目的根目录或者任何子目录配置

参考资料

• babel的polyfill配置
• Babel polyfill 知多少
• 别用babel-polyfill了,教你用core-js@3兼容IE浏览器
• 三种polyfill

感谢阅读，欢迎评论^-^

打赏我吧^-^