详解babel8.X版本用法填坑（babel-loader ， @babel/core , @babel/plugin-stransform-runtime, @babel/preset-env）

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

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

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

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

　　1、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”

　　2、使用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就该能运行起来项目了