webpack4.x下babel的安装、配置和使用的详细说明

前言

目前ES6(ES2015)等语法得到了广泛应用，更加简洁，功能更强大。使用ES6语法的模块很可能在实际项目中使用，但是浏览器对ES6语法的支持并不完善。为了实现兼容性，需要使用一个转换工具将ES6语法转换为ES5语法，巴别塔是最常用的工具。那么如何在webpack中使用babel呢？这是本文要讨论的问题。

写这篇文章的目的是因为最新的webpack版本的一些操作模式发生了变化，babel也在不断更新，所以之前的一些资料或者教程已经不适合了。作者在最新的4.1.1版本的webpack下探索了babel的使用，结果总结如下。以下测试可行，读者可以参考设置。

文章用例

为了解释得更清楚，本文用了一个案例如下：

1.项目的根目录是webpack-test。当然，这个名字是可选的。

2.在项目的根目录下，有一个带有以下代码的index.js文件：

3.index.js引入的a.js文件采用了ES6语法的箭头函数，代码如下：

4.最后，它被打包到dist目录中的main.js文件中。同时，有一个脚本将index.html文件引入dist目录中的main.js。index.html档案的内容如下：

一、安装巴别塔加载器、巴别塔核心和巴别塔预置环境

这三个文件是必要的，但它们的功能各不相同。

首先，作为webpack的加载器之一，babel-loader可以像其他加载器一样处理特定的文件类型。官方webpack文档中指出了加载程序的功能，即：

加载器使webpack能够处理非JavaScript文件(webpack本身只理解JavaScript)。Loader可以将所有类型的文件转换成webpack可以处理的有效模块，然后可以利用webpack的打包能力来处理它们。

虽然webpack本身可以处理。js文件，它无法转换ES2015的语法。babel-loader的作用是处理。使用ES2015语法的js文件。

要使用巴别塔，首先要安装巴别塔加载器。在命令行中找到项目根目录，并输入以下安装说明：

安装完成后npm install -D babel-loader显示的版本在这里是【emailprotected】。

第二，babel-core的作用是提供一系列的API。也就是说，当webpack使用babel-loader处理文件时，babel-loader实际上调用的是babel-core的api，所以也必须安装babel-core:

npm install -D babel-core的作者显示的版本是[emailprotected]。

第三，babel-preset-env的作用是告诉babel使用哪些转码规则进行文件处理。其实巴别塔有几个可以转码ES6语法的规则，比如巴别塔-预置-es2015、巴别塔-预置-最新、巴别塔-预置-env。不过，巴贝尔-预置-env已经得到了政府的推荐，本文也将采用巴贝尔-预置-env。你可以通过官网了解几个规则的区别。另外，在命令行上找到项目根目录，并输入以下安装说明：

npm install -D babel-preset-env安装的版本是[emailprotected]。

第二，配置巴别塔规则

上面只安装了三个软件包。如果你想让巴别塔工作，你需要配置巴别塔规则。

第一种方法是通过package.json.在package.json文件中添加一个“babel”属性，它是一个json对象，用于设置项目中的babel转码规则和使用的babel插件。其基本格式如下：

babel ' : { ' preferences ' :[]，' plugins ' :[]}“preferences”属性字段设置转码规则，而“plugins”属性设置使用插件。在本项目中，只需将“巴别塔”属性的“预设”:设置为[“env”]，如下所示：

上面的' babel ' : { ' preferences ' :[' env ']}的设置告诉npm，这个项目会使用babel，使用bable-preference-env规则进行转码，也就是实现ES2015语法的转码。

此外，还有第二种方法，那就是通过。babelrc文件。创建新的。项目根目录中的babelrc文件，在这里您只需要在第一个方法中输入“babel”属性的值：

{ ' preferences ' :[' env ']}的功能与第一种方法相同。

第三，建立并配置webpack.config.js文件

只是上面还是不行。虽然上面已经配置了babel的规则，但是webpack仍然不知道什么时候使用规则，所以需要使用webpack.config.js文件。

该文件的目的是配置webpack打包的参数。正如我在第一篇关于webpack4.x的文章《webpack4.x开发环境配置》中提到的，像webpack.config.js这样的配置文件在webpack4.x中并不是必须的，但实际上，如果你想进行更个性化的打包配置，还是需要用到这个文件。在根目录下创建一个新的webpack.config.js文件，并输入：

模块。导出={ module : { rule s 3360 [{ test 3360/\。js $/，exclude:/node _ modules/，loader : ' babel-loader ' } } }这告诉webpack在打包时，一旦。js文件匹配，babel-loader用于处理。如上所述，babel-loader使用babel-preset-env规则调用babel-core的api进行代码转换。这里不使用输入和输出等参数。这是因为webpack4.x有默认的入口和出口，所以没有必要更改这个项目，所以没有必要设置它。

第四，运行查看结果

假设您在package.json文件的“scripts”属性下添加了“build”属性，也就是说，

构建' : '网络包-模式生产-进度-显示-模块-颜色-显示-原因'现在，在命令行中找到项目根目录并执行

Npm运行构建这相当于执行对应于“构建”属性的脚本。

现在，网络包开始打包。打包完成后，用浏览器打开dist目录中的index.html查看结果，可以发现弹出窗口弹出了两次

第一次是‘hello world’，第二次是‘2，3，4’。

这表明a.js中的arrowTest()函数已成功执行。打开main.js查看打包的代码，还可以发现arrow函数的代码已经转换成了ES5语法，如下所示：

[1,2,3].map (function (r) {return r 1})这表明整个巴别塔的配置和使用已经成功。

当然，以上只是最基本的配置和使用。如果要处理比较复杂的情况，只需要参照官方文件修改相关参数，并不难。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。