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 语法