Babel 编译器与 Webpack 的深度融合技巧-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Babel 编译器和 Webpack 是两个常用的工具。Babel 可以将 ES6+ 语法转换为浏览器可识别的 ES5 语法，而 Webpack 则可以将多个模块打包成一个文件，减少 HTTP 请求。本文将介绍 Babel 编译器和 Webpack 的深度融合技巧，帮助开发者更好地使用这两个工具。

Babel 编译器的配置

首先，我们需要在项目中安装 Babel 编译器及其相关插件。可以使用以下命令进行安装：

npm install --save-dev @babel/core @babel/preset-env @babel/plugin-transform-runtime

@babel/core 是 Babel 编译器的核心包。
@babel/preset-env 可以根据目标浏览器或 Node.js 版本等环境信息，自动确定需要转换的语法和插件。
@babel/plugin-transform-runtime 可以将 Babel 编译器产生的公共代码提取到一个单独的模块中，以减少打包文件的体积。

然后，在项目根目录下创建 .babelrc 文件，并添加以下内容：

// www.javascriptcn.com code example
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

以上配置中，我们指定了目标浏览器为最近的两个版本和 IE 11 及以上版本。这样 Babel 编译器会根据这个信息自动转换需要转换的语法和插件，并将公共代码提取到一个单独的模块中。

Webpack 的配置

接下来，我们需要在项目中安装 Webpack 及其相关插件。可以使用以下命令进行安装：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader html-webpack-plugin clean-webpack-plugin

webpack 是 Webpack 的核心包。
webpack-cli 是 Webpack 的命令行工具。
webpack-dev-server 可以启动一个本地服务器，方便开发和调试。
babel-loader 可以将 ES6+ 语法转换为 ES5 语法。
html-webpack-plugin 可以生成 HTML 文件，并自动将打包后的 JavaScript 文件引入到 HTML 中。
clean-webpack-plugin 可以在每次打包前清空打包目录。

然后，在项目根目录下创建 webpack.config.js 文件，并添加以下内容：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: './dist'
  }
};

以上配置中，我们指定了入口文件为 ./src/index.js，输出文件为 ./dist/bundle.js。在 module 配置中，我们指定了对于 .js 文件使用 babel-loader 进行转换。在 plugins 配置中，我们指定了在每次打包前清空 ./dist 目录，并生成一个 HTML 文件，将打包后的 JavaScript 文件引入到 HTML 中。在 devServer 配置中，我们指定了本地服务器的根目录为 ./dist。

深度融合技巧

现在我们已经配置好了 Babel 编译器和 Webpack，接下来介绍一些深度融合的技巧。

使用 `@babel/polyfill` 和 `core-js`

@babel/polyfill 是 Babel 编译器提供的一个用于实现 ES6+ 新特性的垫片，可以在浏览器中模拟这些新特性。但是，@babel/polyfill 会将所有的垫片都引入到打包文件中，导致打包文件体积过大。为了解决这个问题，我们可以使用 core-js 库来按需引入垫片。

首先，我们需要安装 @babel/polyfill 和 core-js：

npm install --save @babel/polyfill core-js

然后，在入口文件中添加以下代码：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

以上代码中，core-js/stable 表示引入所有稳定的垫片，regenerator-runtime/runtime 表示引入生成器函数的垫片。

使用 `tree shaking`

tree shaking 是 Webpack 的一个特性，可以将未使用到的代码在打包时删除，从而减小打包文件的体积。但是，由于 Babel 编译器会将 ES6+ 模块语法转换为 CommonJS 语法，导致 tree shaking 失效。为了解决这个问题，我们可以使用 @babel/preset-env 的 modules 选项，将 ES6+ 模块语法转换为 ES6 模块语法。

在 .babelrc 文件中，添加以下内容：

// www.javascriptcn.com code example
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        },
        "modules": false
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

以上配置中，我们指定了 modules 选项为 false，表示不进行模块语法的转换。

使用 `webpack-bundle-analyzer`

webpack-bundle-analyzer 是 Webpack 的一个插件，可以将打包后的文件以可视化的方式展示，方便开发者分析打包文件的体积和组成部分。可以使用以下命令进行安装：

npm install --save-dev webpack-bundle-analyzer

然后，在 webpack.config.js 文件中添加以下代码：

// www.javascriptcn.com code example
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    // ...
    new BundleAnalyzerPlugin()
  ]
};

以上配置中，我们添加了 webpack-bundle-analyzer 插件，并在 plugins 配置中进行了引用。运行 Webpack 打包命令后，会自动打开一个浏览器窗口，展示打包文件的体积和组成部分。

示例代码

以下是一个使用 Babel 编译器和 Webpack 进行深度融合的示例代码：

// www.javascriptcn.com code example
// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        },
        "modules": false
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new BundleAnalyzerPlugin()
  ],
  devServer: {
    contentBase: './dist'
  }
};

// src/index.js
import 'core-js/stable';
import 'regenerator-runtime/runtime';

const sum = (a, b) => a + b;

console.log(sum(1, 2));

以上代码中，我们使用 Babel 编译器将 ES6+ 语法转换为 ES5 语法，并使用 Webpack 将入口文件打包成一个文件。在入口文件中，我们使用了 ES6+ 的箭头函数语法，并使用了 core-js 库和 regenerator-runtime 库中的垫片。在 webpack.config.js 文件中，我们使用了 clean-webpack-plugin 插件清空打包目录，使用了 html-webpack-plugin 插件生成 HTML 文件，并使用了 webpack-bundle-analyzer 插件分析打包文件的体积和组成部分。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d53f8fa941bf71349b3918

Babel 编译器与 Webpack 的深度融合技巧