升级到Babel 7的经验

isLishude 发布于2019-08-23 12:10 / 2932人阅读

摘要：最近我在给自己团队的组件库升级到，没有想象中那么难，但也有一些需要注意的问题，这里分享一些升级的体会和经验。这个是属于提案。

Babel的最新版本Babel 7 已经在Henry Zhu的不断努力下发布了，他真的是全身心地投入到了Babel的开发中，而Babel对于前端界的贡献也是有目共睹，没有这个神奇的编译器，前端界要落地ES6语法恐怕还要再等十年。

最近我在给自己团队的UI组件库升级到Babel 7，没有想象中那么难，但也有一些需要注意的问题，这里分享一些升级的体会和经验。

关于stage-x插件的废弃

Babel 7的改动还是不少的，一个比较大的改动在于移除了之前的stage-x插件，根据官方博客的解释，stage-x插件原本是对应于ECMA Script提案中的不同阶段，每个阶段有不同特性，而stage-x插件事实上就是集合这个阶段中几种特性转译的插件，比如我们最经常看到的babel-preset-stage-0，其实就是这样的：

module.exports = {
  presets: [
    require("babel-preset-stage-1")
  ],
  plugins: [
    require("babel-plugin-transform-do-expressions"),
    require("babel-plugin-transform-function-bind")
  ]
};

每个stage插件都会包含下一阶段的所有插件，这就导致大家为了能用上大多数特性，纷纷采用了babel-preset-stage-0，React项目中，我们最经常看到的babelrc配置是这样的：

{
  "presets": ["es2015", "react", "stage-0"]
}

然而，提案一直在变，如今是stage 0的特性，可能之后就进入到了stage 1，也可能之后直接被否决抛弃掉，并不会进入到ES规范中。那么babel是不是应该更新这些stage插件呢？如果更新了，现阶段大量前端项目、npm库都在使用这个stage插件，会不会突然发现就编译不了某个特性了呢？

到底应该遵循规范，还是应该迁就老项目做兼容呢？

最后Babel团队做出来的决定是，废弃掉stage-x插件！这不仅仅是关乎上面这个问题，由于大家已经习惯了stage的配置，对于其中封装的各个特性早已不再关心，废除掉stage-x插件，开发者就得加上自己需要的插件，每个插件对应一个提案中的特性，这样项目中的配置也能更清晰。

另外，之前的命名也由@babel/plugin-transform-改为@babel/plugin-proposal-，就是为了强调这只是一个提案中的特性，并不能确保它会出现在下一代的ES规范中。

es2015 插件 -> env 插件

babel-preset-env已经发布了一段时间，它相比es2015可以更加灵活地配置，Babel 7宣布废弃babel-preset-es201x而采用新的env插件也是理所当然，这个插件的配置不再赘述，可以参考官方文档

说说babel-upgrade

为了让你更方便的升级到Babel 7，官方提供了一个工具babel-upgrade，对于已有的项目，只需要运行这样一行命令就可以了：

npx babel-upgrade --write --install

但是这就是为什么我先写了前面这两节的原因，这个工具的本质其实就是把之前的es2015换成env，stage-x换成各种proposal-xxx，并且加上了@babel作为新的Babel 7生态统一使用的scope。如果之前的项目使用了stage-x插件，就会多出大量的插件，其实这里面大部分插件都是无需使用的，你可以根据项目中用到的特性适当删减。

事实上，我最后项目中只使用了一个插件，babelrc配置如下：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": ["@babel/proposal-class-properties"]
}

说说babel-plugin-transform-class-properties

这个插件在React项目中十分常用，因为我们经常需要将React组件类中的方法的this绑定到组件本身，如果不用箭头函数，我们就需要使用bind将函数一个个绑定好，但如果可以使用箭头函数在class字段中直接绑定的话，就非常方便了，即：

class Bork {
    boundFunction = () => {
        return this.state;
    }
}

这样，箭头函数被当作成class的属性来看待，this也不会指向undefined。

这个特性就需要babel-plugin-transform-class-properties来转译，这个插件在原来是包含在stage-2里面的，现在，就需要多带带引入。
当然其实这里最好是引入@babel/plugin-proposal-class-properties，更加符合规范。

这个是属于Class Field提案。

云服务器 GPU云服务器升级默认python2.7为python 升级到升级到企业版升级到VS2013

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98040.html

Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

摘要：想要使用阶段的语法需要单独引用对应的，上面的配置只加了几个处于阶段的，老项目建议使用升级，自动添加依赖添加配置文件按需引入增加配置其他问题下面是我公司项目中遇到的问题，各位升级过程中如果遇到同样的问题可以参考一下解决思路。 0. 前言早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章，当时也是我在做自己一个个人项目时遇到的配置问题，想到别人也...

Anchorer 2019-08-23 14:24 评论0 收藏0
如何搭建一个基于react、webpack4、babel7的项目（一）

摘要：对的工作流程有点模糊，以及据官方文档称的升级，性能得到了极大的提升，而还是用的，于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中，都会一个个涉及到，此处不做详细展开。前言写前端项目这么久了，以前用的 dva 框架，后来用过 create-react-app 框架，都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...

IamDLY 2019-08-23 12:30 评论0 收藏0
react技术栈升级的过程

摘要：第一阶段升级到升级到遇到的坑在中去除，导致需要替换成。中把内置的去掉，添加了和平级的属性，来区分环境。的有这中属性，若要在系统中使用，则用变量来获取，比较奇葩。的路径原来的，应替换为相对路径的。第一阶段： react15+react-router2+redux3+webpack1 升级到 react16+react-router3+redux4+webpack4 1.reac...

Ethan815 2019-08-23 11:56 评论0 收藏0
前端周刊第57期：《战争与和平版》的 CSS-IN-JS 黑历史

摘要：以战争与和平为蓝本回顾了历史，也给出了非常赞的观察视角，程序员应该务实，而不是教条，更重要的是保持好奇心。初版于年前发布的，作者重写整个仓库从到之后，最近发布了版本，新版最大变化是升级到。 showImg(https://segmentfault.com/img/remote/1460000009584813); 不知道大家是否注意到，社区中出现的 CSS 尤其是 CSS-IN-JS...

zhangqh 2019-08-20 16:53 评论0 收藏0
【翻译】babel对TC39装饰器草案的实现

摘要：历史装饰器这个概念三年多前被首次提出。在版本年中发布了对装饰器的支持以及许多特性。有不同的安全级别需要考虑装饰器不应该意外泄漏私有名称。你可以测试装饰器的新语法，并向提案的作者们提出反馈意见。原文地址：https://babeljs.io/blog/2018/...原文作者：Nicolò Ribaudo Babel 7.1.0最终支持新的装饰器提案，可以通过@babel/plugin...

Mr_zhang 2019-08-23 15:30 评论0 收藏0