babel版本变化 - 简单理解

Posted 2021-03-18 bai1218

babel版本变化

现在大部分使用babel的项目都是用的babel7.x了，但是还是需要去了解一下babel每个版本的一个重大变化，本篇主要是简单来记录下我了解的babel几个版本的重大变化

babel5.x

我看官网babel5已经没有了，，，但是在我了解的过程中，有好多博客都说有babel5，，，差不多就是说babel5就是一个全家桶，类似于vue-cli那样的东西，包括各种包和插件，babel5大概就是让你通过一次安装，尽可能的可以达到所有你想要的东西。

babel6.x

babel5升级到babel6最主要的原因可能就是之前都让大家一次npm就把所有的东西都安装了，但是有的东西是不需要的，导致包的体积很大，所有babel6就把一些包和插件都拆了出来可以去独立安装，我的猜测是这样的。。。

babel6的改变：

• 把之前的一次性安装拆成了一些核心安装包：babel-core、babel-cli、babel-polyfill等等。。。
• 插件化，根据自己的需求去手动的添加plugin，这点我觉得可以，一切都讲究个按需加载嘛；
• 可以使用.babelrc 文件来配置babel，方便自定义的配置，难道说babel5只能在package.json中配置？知道的大佬可以给我评论下0.0
• 添加了预设preset，这个预设在我学到的时候再细说，听说很牛逼；
• babel5可以直接把require的转成import，babel6就不行，如果用了require需要加上.default才可以，不过我觉得直接改成import就好了，这一条我是有的说的，因为我，，，梦到过(卡姆说的)，有次我也遇到了这个问题，引入的一个第三方包里面有用require，我的解决方案是引入了一个叫@babel/plugin-transform-modules-commonjs插件就把require编译成import了；
• 差不多了，babel6先了解这么多，还想了解的可以去babel官网看看。

babel7.x

来了来了，最牛逼的babel7

• 安装包都使用npm的scope包@balbel/xxx，不会再出现和别的包名冲突；
• 所有阶段预设state-x均已弃用，使用plugin代替，官网也有一个升级方案，可以安装babel-upgrade包，它会把你之前有用过的stage-x自动换成对应的plugin，我没用过，有需求的可以去看看

https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md

• 更强大的env
• 之前有的插件是带着类似于es2015这样的(等等)，比如@babel/plugin-transform-es2015-classes，现在直接写@babel/plugin-transform-classes就可以
• 有些包被删了，比如babel-core/register.js，应直接用@babel/register
• 差不多先这些