前言
babel-preset-env 是 babel 7.x 版本中的一个预设 preset,它可以根据目标环境(浏览器或 Node.js)自动为代码转换添加需要的插件,从而达到根据使用情况进行最小化转换的效果。同时它支持配置浏览器或 Node.js 版本来确定需要转换哪些 ECMAScript 新特性。
然而,从 7.0 版本开始,babel-preset-env 中默认的 es2015、es2016 等 preset 都被移除了,只剩下了 env 和 stage-2 两个 preset。这导致了很多旧项目升级到 7.x 版本后因为 babel-preset-env 不向下兼容而出现问题。本文将详细总结这个问题的产生和解决方式,以及对开发的指导意义。
问题的产生
在 babel 6.x 中,babel-preset-env 包含了很多之前的 preset,例如 es2015
、es2016
等,可以直接在 .babelrc 文件中使用。但是在 babel 7.x 中,这些 preset 被移除了,只保留了 env 和 stage-2 两个 preset。同时,.babelrc
文件不能直接以 JSON 格式书写,需要改为 Javascript CommonJS 模块的写法,并通过 module.exports
导出一个对象。
这意味着如果你原先是这样写 .babelrc
文件的:
- ---------- --------- --------- ---------- -
现在要改为这样:
-------------- - - -------- - ---------------------- - -------------------- - -------- - -- ------------ ------- -- -- -- ------------ -------- ------- -- -- -- ------------------------ - --
其中,useBuiltIns
和 corejs
选项用于配置 babel-polyfill 的加载方式,从而在支持的浏览器下最小化 polyfill 的代码量。
解决方式
尽管移除旧的 preset 带来了使用上的不便,但 babel-preset-env 本身已经足够强大。在这里我们列举一些解决升级问题的方法:
手动添加旧的 preset
如果你不想在 .babelrc 中直接填写插件,也可以手动在项目中安装 es2015、es2016 等 preset 并添加到 .babelrc 文件中,如下所示:
-------------- - - -------- --------- --------- ------------------------ -
支持框架或库添加 preset
很多框架或库都内部集成了 babel 的配置。例如 Vue 或者 Storybook 等,它们自带了 babel 配置文件,可以在其中添加 preset-env。如果你在使用这些库或框架,就无需自己手动添加。
更新项目代码
最根本的解决方式是更新项目代码,使用新的语言特性和 best practice。这样就能发挥 babel-preset-env 的优势,最小化转换的代码量。
指导意义
babel-preset-env 的版本升级带来了一些使用上的不便,但是这也提醒了我们,代码迭代是不可避免的。我们需要保持学习新技术,尽可能更新代码实现,以及注意开源库和框架的版本迭代。在这个过程中,防止代码冻结,即使遇到困难也不能放弃、停滞不前。
示例代码
--- ------- ---------- ----------- ---------- -----------------
安装完毕后,你可以在 babel.config.js 中添加如下代码:
-------------- - - -------- - - -------------------- - -------- - --------- ------ - ---------- --- -- --- -- -------- - -------- ------ -- ------------ -------- -- ---- -------- ------- -- -- -- ------- --- -- -- -- -- --
接下来我们创建一个 src 目录,并在其中创建一个 index.js 文件,添加如下代码:
----- --- - --- -- -- - - -- ----- --- - ------ --- -----------------
最后,在 package.json 文件中添加如下脚本:
- ---------- - -------- ------ --- --------- ----- - -
运行 npm run build
即可将 src 目录下的代码转换到 dist 目录中,输出的代码支持 IE8 及以上版本以及最新版的 5 个浏览器。转换后的代码如下:
---- -------- --- --- - -------- ------ -- - ------ - - -- -- --- --- - ------ --- -----------------
结论
babel-preset-env 的版本升级带来了不便,但同时也提醒了我们未来代码迭代所需的学习和注意事项。我们应该保持更新代码和学习新技能的意识,才能更好地适应不断变化的编程世界。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645cd81d968c7c53b0f5acd2