babel8.X填坑【转载】

转载原地址

话说在前端这一块有一件让人非常匪夷所思的事情，就是包括webpack，包括几乎所有常用的前端模块（包），只要有大版本的更新，必然跟之前的版本大变脸，连api都给你变了，于是出现各种坑，真不知道为什么要这么设计。要知道在服务端的技术里，不管是Java还是.NET，技术都是有极好的延续性的，不可能说版本一更新，之前的api都变了，以前写的程序就各种报错，不能运行。新版本往往只是在旧版本的基础上添加一些东西，而不是颠覆。

好了，吐槽完毕，归入正题。

今天要记录的是babel 8.X版本，以及相关包的用法。之所以要说这个，原因很简单，因为babel8 跟babel7真的是大变，又是一系列的坑。

咱们先把babel7.X版本下要用的包和各种配置先罗列出来，然后再说明babel8.x的用法。这样也好有个对比。

一、babel7.X版本
　　1.要安装的包

第1套包：npm I babel-core@7 babel-loader babel-plugin-transform-runtime –D

第2套包：npm I babel-preset-env babel-preset-stage-0 –D(注意是-零，不是字母o)

这里babel-loader一定要加版本号7，否则下载的将是最新版本8

2.webpack.config.js配置文件中，rules节点的配置写法

{ test: /.js$/, use: ‘babel-loader’,exclude:/node_modules/},

注意：

①虽然是2套包，但对于loader来说只有一个，所以urse属性只有一个loader。

②exclude是排除的意思。这个属性的意思就是不要去匹配node_modules目录中的文件。

③node_modules中的文件都已经是现成的包了，人家都打包好了，不需要我们再去打包。

④而且该目录中代码文件太多，排除掉它，也能提高很高的打包性能

3.配置.babelrc文件

{

“presets” : [“env”, “stage-0”],

“plugins” : [“transform-runtime”]

}

注意：

①"presets"是用来配置处理“语法”的项。这2套包中，带有preset的包是babel-preset-env 和 babel-preset-stage-0 ，他们的名字分别是env/stage-0，前边的babel-preset是前缀。

②"plugins"是用来配置插件的项。这2套包中，只有babel-plugin-transform-runtime是插件，并且该插件的名字是“transform-runtime”

二、使用babel8.X版本　　
　　先从大体上介绍一下babel8的变化点。

第一，各个包的名字变了，都以@符号开头。这个变化带来2个影响。其一，以前每个包在node_modules目录下都是一个独立的文件夹；现在则在node-modules目录下有个叫“@babel”的目录，这里要安装的所有babel包，都在这个@babel目录下保存。其二，在配置的时候，写法完全变了。

第二，有一些包被彻底废弃。比如在babel7.X版本中用到的babel-preset-stage-0

第三，有一些新的包必须引入进来才可以。

具体用法如下：

1.必须安装的包如下：

需要注意的是，这些@开头的包，在实用npm安装时，包名必须用引号引住，否则npm会把它当做不可识别的字符。例如:

npm i babel-loader ‘@babel/core’ -D

babel-loader没有@符号，所以不需要引号包住；@babel/core则需要用引号包住。其他以此类推

这里小版本号就不要计较了，只要大版本号能对上就都一样。

2.各个包的作用如下

babel-loader：加载器
@babel/core：babel核心包,babel-loader的核心依赖
@babel/preset-env：ES语法分析包
@babel/runtime和@babel/plugin-transform-runtime：babel 编译时只转换语法，几乎可以编译所有时新的 JavaScript 语法，但并不会转化BOM（浏览器）里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的。
@babel/plugin-proposal-class-properties：用来解析类的属性的。
　　3.配置webpack.config.js。由于“babel-lodaer”包名字没变，api写法也没变，还是那么写

{ test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/},//处理高级ES语法的babel_lodaer

4.添加.babelrc配置文件，并在该文件中写下如下配置信息

{

　　　"presets": ["@babel/preset-env"],

“plugins”: ["@babel/plugin-transform-runtime", “@babel/plugin-proposal-class-properties”]

}

这些插件及配置方法，基本上就是babel8版本下必须安装的包了。接下来npm run dev就该能运行起来项目了