webpack入门学习笔记06 —— 使用babel打包编译js文件

1. 写在前面

在前端项目中，占主导地位的文件，我想应该是 .js 文件。随着 JS语言 的不断升级改进，愈来愈多的高级语法被加入到该语言中，好比咱们熟知的 ES6语法、ES7语法 等。

虽然 ES6语法、ES7语法 咱们写起来感受很是方便，可是目前市面上的浏览器却不认识这些语法，这就致使咱们辛辛苦苦作出来的项目却不能运行，让人很抓狂。这个时候咱们要怎么办呢？

办法确定是有的，咱们能够借助webpack这一工具，来将这些高级语法，转换成浏览器可以识别的低级语法（如ES5语法），这样就可使项目正常运行了。而webpack之因此可以作到这一点，是由于它使用了 babel 这一工具。这是一个什么工具呢？这篇博客就会来说解。

为了方便不一样的读者都能从这篇博客中有所收获，本篇博客准备在前半部分介绍如何在webpack中配置 babel 来编译转换高版本语法，在后半部分会讲解关于 babel 的知识。你们各取所需，根据本身的实际状况来选择阅读哪一部分。

2. 在webpack中配置babel，编译高本版JS语法

既然要使用 babel 咱们就要先安装这些依赖包，这里咱们须要安装三个包：babel-loader 、 @babel/core 、 @babel/preset-env ，安装命令以下：

yarn add babel-loader @babel/core @babel/preset-env -D
复制代码

简单介绍一下这是三个包的：babel-loader 和 @babel/core 是核心插件。@babel/preset-env 是babel的 预设 ，它的主要功能是将 ES6 语法转成 ES5 语法。

依赖包安装完成以后，要到 webpack.config.js 文件中进行配置，配置的步骤和前面博客中讲述的配置 .css 文件的步骤相似，这里直接给出配置代码（重点关注有注释的部分）

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')

module.exports = {
    devServer: {
        port: 3000,  
        progress: true,  
        contentBase: "./build",  
        compress: true  
    },
    mode: "development",  
    entry: "./src/index.js",  
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.js$/,      // 匹配js文件，而后用下面所配置的工具对这些文件进行编译处理
                use: {
                    loader: 'babel-loader',     // babel的核心模块
                    options: {
                        presets: [              // 配置babel的预设，将ES语法转成ES5语法
                            '@babel/preset-env'
                        ]
                    }
                }
            }
        ]
    }
}
复制代码

配置完成以后，咱们就能够在项目中使用 ES6 语法来编写项目了。注意我这里说的是 ES6 语法，若是在项目中你使用了更新的 ES7 语法，仅靠上面的配置是不行的，在你进行打包编译的时候会报错，好比在项目中使用了如下的 ES7 语法：

class A {
    className = 'A' 
}

let a = new A();
复制代码

这个时候再进行打包编译的时候，会报错如下错误：根据提示，是由于咱们没有安装所须要的依赖包。

道理很简单，仅靠上面书写的 babel 配置，只能转换 ES6 语法，若是要转换更高版本的语法，就要进行其余配置，好比这里转换 ES7 语法。

根据提示，咱们须要安装所需的包：@babel/plugin-proposal-class-properties ，安装代码以下：

yarn add @babel/plugin-proposal-class-properties -D
复制代码

安装完成以后，修改 webpack.config.js 文件中的 babel 配置，修改后的代码以下:

{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                '@babel/preset-env'
            ],
            plugins: [	// 配置babel插件，转换更更高版本语法
                '@babel/plugin-proposal-class-properties'
            ]
        }
    }
}
复制代码

同理，若是你在项目中使用了其余的高级语法，好比 装饰器 ，那么也是须要额外配置的，这里就不一一阐述，到时候你可根据webpack的报错信息，进行查找配置便可。

到这里webpack打包编译 .js 文件的相关知识已经讲完，下面结合本身的认识，介绍一些 babel 的知识。

3. babel是个什么东西

首先列出babel的中文官网，更多知识可查阅该官网：www.babeljs.cn/ 。

根据官网的定义：Babel 是一个 工具链 ，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便可以运行在当前和旧版本的浏览器或其余环境中。 在具体的实践中，babel能够帮咱们作一下事情：

• 语法转换
• 经过 Polyfill 方式在目标环境中添加缺失的特性 (经过 @babel/polyfill 模块)
• 源码转换 (codemods)
• 更多 ...

对于前端小白来讲，上面的文字还不足以帮助他们了解babel，下面我用大白话来讲一下：咱们将babel类比成手机上使用的 中英词典APP。

咱们知道，手机上安装的 中英词典APP 能够帮助咱们将不认识的英文翻译成咱们熟知的汉语，这样咱们就能够理解单词和句子表达的意义了。相似，babel 能够将咱们写的 ES6 语法翻译成浏览器熟悉的 ES5 语法，这样，浏览器就能够知道这些 JS 代码要作什么事情了。好比下面的例子：

中英词典APP 在咱们安装之初，就能够将英文成中文，是由于开发程序员在这个APP中预先设置了中英翻译功能。同理，babel 在配置之初就能够将 ES6 语法翻译成 ES5 语法，是由于咱们在配置之初，给 babel 指定了 预设（presets） ，才使得 babel 能够作到这一点。

默认状态下，中英词典APP 能够将英语翻译成汉语，可是不能将俄语翻译成汉语，由于程序员在开发以前，没有预先设置这个功能，若是咱们想要这款APP也能够翻译俄语，那么就须要下载额外的 俄语翻译扩展包 ，下载完成以后，就能够实现这个功能。

同理，在默认配置下， babel 能够将 ES6 翻译成 ES5 ，可是不能将 ES7 翻译成 ES5。这是由于在 babel 中有将 ES6 翻译成 ES5 的 预设（presets） ，没有将 ES7 翻译成 ES5 的 预设（presets） 。若是要实现这个功能，咱们就须要下载配置额外的 插件，好比第一节提到的 @babel/plugin-proposal-class-properties 。插件 配置下载配置完成以后，就能够将 ES7 等更高级语法翻译成 ES5 语法。

经过babel的中文官网，咱们能够看到对于不一样版本的语法，有不一样的插件。至关于在 中英词典APP 中，对于不一样的语言，有不一样的扩展包，须要什么扩展包，咱们下载便可。

根据我的的经验，在使用这些插件的时候，项目开发之初不用配置。在打包编译的时候，若是报错了，再根据报错信息，查看缺乏什么插件，而后再进行配置便可。固然，若是你经验很丰富，一开始就知道要使用那些插件，那么确定要提早配置，

4. 写在最后

好了，以上就是本篇博客的全部内容了，只是我的学习过程当中的一些心得体会，若是有不当的地方，还但愿各位大神给出指点。

若是你想深刻学习 babel ，能够看他们官网的文档，我的以为仍是很是详细的：www.babeljs.cn/docs/

上一篇: webpack入门学习笔记05 —— 使用webpack打包编译css文件

下一篇: webpack入门学习笔记07 —— 关于babel的一些补充