如何在 Webpack 中使用 babel 转译 ES6 代码-JavaScript中文网-JavaScript教程资源分享门户

前言

随着前端技术的不断发展，ECMAScript 6(简称ES6)在前端领域也逐渐成为了主流。但是，由于浏览器对ES6的支持程度的不同，导致在进行前端开发时，可能会遇到诸如不同环境下的运行错误、语法不兼容等问题。因此，在使用ES6进行开发时，引入babel进行代码转译已经成为了一种非常常见的做法。本篇文章将讲述如何在Webpack中使用babel进行ES6代码转译。

Webpack 简介

Webpack是一款现代JavaScript应用程序的静态模块打包器，它将对应用程序的所有文件建立关系图，并通过这个关系图把所有文件都打包成若干个最终的文件，从而提高前端项目的运行效率。Webpack不仅仅支持JavaScript，还支持TypeScript、coffeeScript等一些其他语言的代码打包。

Babel 简介

Babel是一款流行的JavaScript编译器，用于将ES6+代码转换为向后兼容的JavaScript语音。这意味着我们可以在ES6+语言中使用非常先进的语言特性，并不用担心是否对目标浏览器环境的兼容性问题。

在Webpack中配置Babel

安装相关包

为了在Webpack中使用Babel进行代码转译，我们首先需要安装相关的包。打开终端窗口，输入以下命令：

npm install babel-loader @babel/core @babel/preset-env webpack --save-dev

其中，各个包所代表的作用如下：

babel-loader：Webpack用于处理ES6语法的JS文件。
@babel/core：Babel的核心实现。
@babel/preset-env：根据你的环境自动推断出Babel需要加载的插件。
webpack：基于模块化开发的打包工具。

在Webpack中配置Babel

在为我们的项目中创建一个Webpack配置文件前，我们需要先了解一些诸如如何在Webpack中使用babel-loader、babel-loader的配置选项，和通过babel插件和预设（presets）自定义Webpack构建配置等重要概念。

使用babel-loader

Webpack处理的所有文件都会首先通过一系列的loader进行处理，其中包括babel-loader。默认情况下，当Webpack检测到某个JS文件，就会使用babel-loader来处理我们的代码。在Webpack配置文件中进行如下的配置：

// javascriptcn.com 代码示例
module.exports = {
    module: {
        rules: [{
            test: /\.js$/, // 匹配所有.js文件
            exclude: /node_modules/, // 排除node_modules目录
            use: {
                loader: "babel-loader",
            }
        }]
    }
}

在这样的配置中，Webpack的处理过程如下：

将所有.js结尾的文件列表提取出来。
根据正则表达式 /\.js$/ 过滤掉所有的 node_modules 中的库脚本文件。

做完上述步骤，Webpack 就会把符合要求的JS文件交给Babel进行处理。

Babel 插件和预设

在新版本的Babel中，我们通常需要使用预设（presets）和插件（plugins）的方式来对代码进行转译操作，以满足不同项目的配置需求。

预设是一组预定义的插件集合，通常一种语言有一个对应的预设。例如，可以使用 @babel/preset-env 预设，来根据当前浏览器版本自动匹配es2015, es2016, es2017等JS语言版本，而无需手动添加单个的独立插件。

// javascriptcn.com 代码示例
module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"]
                }
            }
        }]
    }
}

这个简单的配置将启用 @babel/preset-env的使用，来转换编译ES6+代码。

Webpack + Babel + React 示例

如果你在你的项目中使用 React，你需要看一下下面的配置:

// javascriptcn.com 代码示例
module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env", "@babel/preset-react"]
                }
            }
        }]
    }
}

在这里，我们在preset数组中添加了 @babel/preset-reactpreset,使Webpack准确地识别JSX语法。

总结

在本文中，我们介绍了在Webpack中使用Babel进行ES6代码转译的基本流程，了解了Webpack、Babel的相关概念和配置项，在提供了一些示例代码，以帮助大家更好地掌握如何使用Babel在Webpack中进行代码转译。值得一提的是，本文中讲述的仅仅是基础部分，在实际项目中还需要深入了解Babel的扩展，以满足不同项目的需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6547879b7d4982a6eb1e0735