前言
ES6（ECMAScript6）是 JavaScript 语言的下一代规范，添加了许多新特性和变化，使得 JS 语言更加强大和灵活。但是，由于 ES6 还没有得到所有浏览器的支持，我们需要使用工具将 ES6 代码转译成浏览器支持的 ES5 代码。而其中最常见的两个工具就是 WebPack 和 Babel。
WebPack
WebPack 是一个模块打包器，可以将各种类型的文件打包成一个或多个 bundle。在 WebPack 中，每个文件都被视为一个模块，可以使用 require/import 来引入其他模块的代码。
安装
首先，我们需要在项目中安装 WebPack。使用以下命令：
npm i webpack webpack-cli -D
配置
接下来，我们需要配置 WebPack。
在项目根目录中创建一个 webpack.config.js 文件，配置如下：
// www.javascriptcn.com code example
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};上面的配置中，entry 表示 WebPack 的入口文件，output 表示 WebPack 打包后的输出文件。module.rules 用来配置 WebPack 的加载器，其中我们需要使用 Babel 来处理 ES6 代码的问题。
在这里，我们使用 babel-loader，配置如下：
npm i babel-loader -D
总的来说，webpack.config.js 配置的具体含义如下：
使用 Babel 处理选定文件（.js）
忽略将 node_modules 和 bower_components 目录下的文件进行 Babel 处理
设置 WebPack 打包输出的名称和路径
使用
完成配置后，我们就可以使用 WebPack 进行打包了。
使用以下命令进行打包：
npx webpack
你也可以配置 package.json 文件的 script，使用以下命令：
{
"scripts": {
"build": "webpack"
}
}这样，以后只需要使用 npm run build 即可完成打包操作。
Babel
Babel 是一个编译器，可以将 ES6 代码转译成 ES5 代码，让我们的代码可以在浏览器上运行。Babel 可以使用插件来对 ES6 语法进行处理。
安装
同样，我们需要在项目中安装 Babel。使用以下命令：
npm i @babel/core @babel/preset-env -D
配置
创建一个 .babelrc 文件，配置如下：
{
"presets": [
"@babel/preset-env"
]
}Babel 将会按照你在 .babelrc 中设置的配置来处理你的 ES6 代码。上面的配置告诉 Babel 我们需要使用 @babel/preset-env 来处理 ES6 语法。
使用
完成配置后，我们就可以使用 Babel 进行编译了。
我们依然可以配合 WebPack 来一起使用，也可以使用 Babel 命令行工具来单独使用。
使用以下命令进行编译：
npx babel src/index.js -o dist/index.js
上面的命令会将 src/index.js 文件编译成 dist/index.js 文件，通过浏览器就可以运行了。
示例代码
最后，我们来看看完整的示例代码。
我们有一个 src/index.js 文件，内容如下：
// www.javascriptcn.com code example
const arr = [1, 2, 3];
const obj = {
name: 'Alice',
age: 18
};
const newObj = {...obj, sex: 'Female'};
console.log(arr.includes(1));
console.log(newObj);这是一个使用了 ES6 语法的代码。
我们希望将其转译成 ES5 代码，通过浏览器来运行。
首先，我们需要配置 WebPack 和 Babel。使用以下命令：
npm i webpack webpack-cli babel-loader @babel/core @babel/preset-env -D
WebPack 的配置文件 webpack.config.js 如下：
// www.javascriptcn.com code example
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};Babel 的配置文件 .babelrc 如下：
{
"presets": [
"@babel/preset-env"
]
}完成以上配置后，使用以下命令进行编译：
npx webpack
编译完成后，在浏览器中打开 dist/index.html 文件，就可以运行我们的代码了。
完整的示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfdc42e46428fe9ec0a70d