babel6.X、babel7.x、 babel8.x用法

babel6.x使用方法

需要安装的包：
npm install babel-loader --save
npm install babel-core --save
npm install babel-preset-es2015 --save
npm install babel-preset-stage-0 --save
npm install babel-plugin-transform-runtime --save

webpack.config.js配置文件

{
   test: /\.js$/, 
   use: ['babel-loader'],
   exclude: [/node_modules/]
},

.babelrc文件

  {
	presets : ['es2015', 'stage-0'],
　　plugins : ['transform-runtime']
　}

babel7.x使用方法

需要安装的包：
npm install babel-loader --save
npm install babel-core --save
npm install babel-preset-env --save
npm install babel-preset-stage-0 --save
npm install babel-plugin-transform-runtime --save

webpack.config.js配置文件

{
   test: /\.js$/, 
   use: ['babel-loader'],
   exclude: [/node_modules/]
},

.babelrc文件

  {
	presets : ['env', 'stage-0'],
　　plugins : ['transform-runtime']
　}

babel8.x使用方法

需要安装的包：
npm i ‘@babel/core’ -D
npm i ‘@babel/plugin-proposal-class-properties’ -D
npm i ‘@babel/plugin-transform-runtime’ -D
npm i ‘@babel/preset-env’ -D
npm i ‘@babel/runtime’ -D
npm i babel-loader -D

webpack.config.js配置文件

{
   test: /\.js$/, 
   use: ['babel-loader'],
   exclude: [/node_modules/]
},

.babelrc文件

  {
	presets : ['@babel/preset-env'],
　　plugins : ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
　}

安装包的作用
1、babel-loader是加载器
2、@babel/core是babel的核心包,babel-loader的核心依赖
3、@babel/preset-env是ES语法分析包，等同于 babel-preset-env、 babel-preset-stage-0。
4、@babel/runtime和@babel/plugin-transform-runtime：babel 编译时只转换语法，几乎可以编译所有时新的 JavaScript 语法，但并不会转化BOM（浏览器）里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的。
5、@babel/plugin-proposal-class-properties：用来解析类的属性的。