babel学习笔记 - 简书登录注册写文章首页下载APP会员IT技术babel学习笔记始悔不悟关注babel学习笔记babel
原始代码 --> [Babel Plugin] --> 转换后的代码
转译
安装以下依赖:
@babel/core调用 Babel 的 API 进行转码
babel-loader[webpack 的 loader]（https://github.com/babel/babel-loader)
@babel/preset-env 在没有任何配置选项的情况下, babel-preset-env 与 babel-preset-latest（或者 babel-preset-es2015, babel-preset-es2016 和 babel-preset-es2017 一起）的行为完全相同.
@babel/preset-stage-0稻草人提案(babel7 已移除)通过 npx babel-upgrade --write 升级为各种插件
@babel/preset-reactreact 语法转译
preset 即 plugin 的套餐, 无需针对一个个语法规则去安装 plugin
注:plugin 分为转译 plugin/语法 plugin/混合 plugin
env = es2015 + es2016 + es2017
stage-0 = stage-1 + stage-2 + stage-3
preset 具体包含了哪些插件可去官网查询.
通过配置 targets 可以避免浏览器已经支持的特性被转译, 如果同时设置"IE >= 9"与 "chrome >= 66", 以 "IE >= 9" 为准进行转译
polyfill
方案
优点
缺点
推荐使用环境
@babel/runtime + @babel/plugin-transform-runtime
按需引入, 打包体积小, 移除冗余工具函数(helper function)
不模拟实例方法
开发库、工具中使用
@babel/polyfill
完整模拟 ES2015+环境
体积过大, 污染全局对象和内置的对象原型
应用中使用
@babel/preset-env[useBuiltIns:"entry"] + babel-polyfill
按需浏览器引入, 以 target 最低要求为准
可配置性高
注:方案 1 中的@babel/runtime + @babel/plugin-transform-runtime 在 babel7 下只包含 helper function(即 Babel 进行处理时需要的帮助函数), 如果想实现 polyfill , 需要使用@babel/runtime-corejs2, 升级详情
["@babel/plugin-transform-runtime", {
"corejs": 2
}],
要实现真正的按需引入,即使用什么新特性打包什么新特性,可以使用实验性的 useBuildIns:"usage".
Babel 正在向每个文件中注入 helper 并使代码膨胀
解决方案:@babel/runtime + @babel/plugin-transform-runtime
"plugins":["@babel/plugin-transform-runtime", {
"corejs": false,
"helpers": true,
"regenerator": false,
"useESModules": false
}],
在 webpack 中正确使用 Babel
利用环境变量合理使用 babel 对不同环境的代码进行处理,例如在开发环境不要引入 polyfill,在开发环境利用 plugin 将动态 import 转为 require 加快打包速度
开启 babel-loader 的缓存加快打包速度
总结
最好的实践方式:起一个 webpack 环境,配置不同的.babelrc 观察每次打包后的情况,懒得搭环境可以去这个仓库切换到feature/2-babel-support.
这比任何文章都来得实在,多看官方文档,中文总结只是一个参考,具体表现如何还是看实践+文档.
转译方案: @babel/preset-env + @babel/preset-react + 通过命令行升级的 stage-0
polyfill 方案: @babel/polyfill + @babel/preset-env[useBuiltIns:"entry"]
helpers 重复注入解决: @babel/runtime + @babel/plugin-transform-runtime
参考文章及推荐阅读:
babel
大前端的自动化工厂— babel
babel 7 教程
升级至 babel 7
再见, babel-preset-2015
你真的会用 babel 吗？
21 分钟精通前端 Polyfill 方案
babel-polyfill VS babel-runtime VS babel-preset-env
推荐阅读更多精彩内容6.14日精进天气炎热，只有晚上干活最清爽，拆奔驰，干什么活都得讲究方式方法京心达查晓旭阅读 66评论 0赞 0逆境是锤炼，绝境是新生，选对了，你就是一部生命的传奇如果一生中没有陷入过绝境，那么他只能在人生终点时一次性地陷入绝望的深渊。 如果你现在陷入了绝境，恭喜你，宇宙的主宰...杨慧文阅读 1,231评论 1赞 7评论0赞11赞2赞更多好文