在Webpack4.x环境下使用Babel转换ES6语法

一、介绍

在Webpack中 默认只能转换一部分ES6的新语法
部分更高级的ES6语法或ES7语法 Webpack无法转换

比如：
ES6中类的静态属性

class Person{
    static info={name:"Mike",age:18}
}
console.log(Person.info)

此时 Webpack默认打包的时候会报错
需要借助第三方loader来处理这些高级的语法
当第三方loader将高级语法转换为低级语法之后 会将结果交给Webpack进行打包到bundle.js中

通过Babel可以很方便将高级的语法转换为低级的语法

Babel 是一个 JavaScript 编译器 主要用于将ECMAScript 2015+版本的代码转换为向后兼容的 JavaScript 语法 以便能够运行在当前和旧版本的浏览器或其他环境中

二、使用步骤

只需三步即可配置Babel：

1、在Webpack中运行如下两套命令 以安装Babel相关的loader

第一套包：cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
该套包里有@babel/core babel-loader和@babel/plugin-transform-runtime
它们负责语法的转换

第二套包：cnpm i @babel/preset-env @babel/plugin-proposal-class-properties -D
该套包里有@babel/preset-env和@babel/plugin-proposal-class-properties
包含了所有与ES相关的语法 负责匹配语法之间的对应关系

2、配置webpack.config.js

在webpack配置文件webpack.config.js的module节点下的rules数组中 添加一个新的匹配规则：

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

注：必须使用exclude属性来指定要排除的文件(即不转换的文件)
排除node_modules文件夹 因为 若不排除node_modules 则babel默认会将node_modules中所有的第三方js文件都打包
占用大量消耗cpu 同时打包速度非常慢 且最终还会导致项目也无法正常运行

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 所有webpack插件的配置节点
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,"./src/index.html"),
            filename:"index.html"
        })
    ],
    // 配置第三方loader模块
    module:{
        rules:[
            // 第三方模块的匹配规则
            {test:/\.css$/,use:["style-loader","css-loader"]},
            {test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader"},
            {test:/\.ttf|eot|svg|woff|woff2$/,use:"url-loader"},
            {test:/\.js$/,use:"babel-loader",exclude:/node_modules/} // 配置babel来转换高级ES语法
        ]
    }
}

3、配置.babelrc

在项目的根目录中新建一个名为.babelrc的配置文件 该配置文件为JSON格式

在.babelrc中写入如下配置：

在presets属性里配置babel语法
在plugins属性里配置安装的babel插件

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

配置完毕

4、测试

class Person{
    static info={name:"Mike",age:18}
}
console.log(Person.info)

输出结果：

ES6语法转换成功

---