Babel 处理 webpack 无法处理的 ES 语法（Babel 6.x 和 Babel 7.x 有区别）（二）

//这是main.js是我们项目的js入口文件

//1:a导入jQuery,引入jQuery包用$变量接收，此方法与node中 const $ = require('jquery') 同
//此为ES6中导入模块的方式
//由于ES6的语法太高级，浏览器解析不了次引入方式
import $ from 'jquery'

import './css/index.scss'

//class关键字，是ES6中提供的新语法，用来实现 ES6 中面向对象变成方法
class Person{
    //使用static可以定义静态属性
    //所谓静态属性，就是可以通过类名直接访问的属性
    //实例属性，只能通过类的实例来访问的属性叫做实例属性
    static info = { name: 'zs', age: '20' }
}

console.log(Person.info);
//在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的 ES6 语法和 ES7 语法，webpack 处理不了，这时候就需要借助第三方的loader，来帮助 webpack 处理这些更高级的语法，
//当第三方loader 把高级语法转为低级语法之后，会把结果交给webpack 去打包到bundle.js中
//通过Babel，可以帮助我们将高级语法转换为低级语法，
//1：在 webpack 中，可以运行如下两套命令， 安装两套包，全装 Bable 相关的loader功能；
//1.1：第一套： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
//1.2：第二套：cnpm i babel-preset-env babel-preset-stage-0 -D
//2:打开 webpack 的配置文件，在module 节点下的 rules 数组中，添加一个新的匹配规则
//2.1：{ test:/\.js$/, use:'babel-loader'', exclude:/node_modules/ }
//2.2：注意：在配置 babel 的 loader 规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉，原因有两个：
//  2.2.1：如果不排除 node_modules，则 babel 会把 node_modules 中所有的第三方 js 文件，都打包编译，这样会非常消耗CPU，同时打包速度非常慢。
//  2.2.2 哪怕，最终 babel 把所有 node_modules 中的 js 转换完毕了，但是项目也无法正常运行
//3：在项目的根目录中，新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件属于JSON 格式，所以此文件必须符合 JSON 语法规范，不写注释，字符串必须用双引号
// 3.在 .babelrc 写如下配置：(可以把 presets 看做语法的意思)
    // {
    //     “presets”: ["env","stage-0"],
    //     "plugins": ["transform-runtime"]
    // }

//这样创建一个对象，和java，c#实现面向对象的方法一样，class后端借鉴过来的，来实现面向对象
// var p1 = new Person();

上面是mian.js

下面创建 .babelrc文件在根目录

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

然后在 webpack.config.js 中添加 Babel 加载器：

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 转化ES6 语法

上面的做法是 Babel^6x 版本的使用方法，babel在2018年9月份升级了一个大的版本 Babel 7.x，语法有了很大的变动，所以我上面运行的指令已经被out了，必须使用新语法，如下：
新命令如下适合 Babel 7.x和webpack 4 搭配：

• 安装babel插件
  • 　　运行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
  • 　　运行 cnpm i @babel/preset-env @babel/preset-stage-0 -D
• 安装能够识别转换jsx语法的包 babel-preset-react
  • 　　运行 cnpm i @babel/preset-react -D
• 执行命令：cnpm i @babel/plugin-proposal-class-properties -D
• 执行命令：cnpm i @babel/runtime -D
• 添加 .babelrc 配置文件：

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

最后在 webpack.config.js 中配置上：

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 转化ES6 语法