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

1//这是main.js是我们项目的js入口文件
2
3//1:a导入jQuery,引入jQuery包用$变量接收，此方法与node中 const $ = require('jquery') 同
4//此为ES6中导入模块的方式
5//由于ES6的语法太高级，浏览器解析不了次引入方式
6import $ from 'jquery'
7
8import './css/index.scss'
9
10//class关键字，是ES6中提供的新语法，用来实现 ES6 中面向对象变成方法
11class Person{
12    //使用static可以定义静态属性
13    //所谓静态属性，就是可以通过类名直接访问的属性
14    //实例属性，只能通过类的实例来访问的属性叫做实例属性
15    static info = { name: 'zs', age: '20' }
16}
17
18console.log(Person.info);
19//在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的 ES6 语法和 ES7 语法，webpack 处理不了，这时候就需要借助第三方的loader，来帮助 webpack 处理这些更高级的语法，
20//当第三方loader 把高级语法转为低级语法之后，会把结果交给webpack 去打包到bundle.js中
21//通过Babel，可以帮助我们将高级语法转换为低级语法，
22//1：在 webpack 中，可以运行如下两套命令， 安装两套包，全装 Bable 相关的loader功能；
23//1.1：第一套： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
24//1.2：第二套：cnpm i babel-preset-env babel-preset-stage-0 -D
25//2:打开 webpack 的配置文件，在module 节点下的 rules 数组中，添加一个新的匹配规则
26//2.1：{ test:/\.js$/, use:'babel-loader'', exclude:/node_modules/ }
27//2.2：注意：在配置 babel 的 loader 规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉，原因有两个：
28//  2.2.1：如果不排除 node_modules，则 babel 会把 node_modules 中所有的第三方 js 文件，都打包编译，这样会非常消耗CPU，同时打包速度非常慢。
29//  2.2.2 哪怕，最终 babel 把所有 node_modules 中的 js 转换完毕了，但是项目也无法正常运行
30//3：在项目的根目录中，新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件属于JSON 格式，所以此文件必须符合 JSON 语法规范，不写注释，字符串必须用双引号
31// 3.在 .babelrc 写如下配置：(可以把 presets 看做语法的意思)
32    // {
33    //     “presets”: ["env","stage-0"],
34    //     "plugins": ["transform-runtime"]
35    // }
36
37
38
39//这样创建一个对象，和java，c#实现面向对象的方法一样，class后端借鉴过来的，来实现面向对象
40// var p1 = new Person();

 上面是mian.js

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

1{
2  "presets": ["env","stage-0"],
3  "plugins": ["transform-runtime"]
4}

 然后在 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 语法