babel版本变化 - 简单理解

PANH 2020-01-05

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
  • 差不多先这些

相关推荐