Webpack 中对于 ESModule 标准的支持-JavaScript中文网-JavaScript教程资源分享门户

随着前端开发的发展和JS标准的不断更新，ES2015中推出的ESModule标准日益普及，尤其是在前端工程化中，Webpack作为强大的打包工具，在对ESModule标准支持方面做出了很大的努力。本文将讲解Webpack对于ESModule标准的支持，同时提供详细的示例代码以及指导意义。

什么是ESModule

ESModule（也称为ECMAScript模块）是ES2015中新增的模块化语法，它允许我们以一种可重复使用的方式分离和组件化我们的代码。与之前广泛使用的CommonJS和AMD等现有的解决方案不同，ESModule是基于静态分析的，并且支持在浏览器和Node.js环境下运行。ESModule最大的好处在于能够编写和使用更加可维护、可测试和可靠的代码。

以下是简单的ESModule语法：

// www.javascriptcn.com code example
// 导出一个值
export const a = 'hello';

// 导出多个值
const b = 'world';
const c = { x: 1 };
export { b, c };

// 导入
import { a, b, c } from './module';

Webpack对于ESModule标准的支持

在Webpack 2.0版本之前，它只支持CommonJS和AMD规范，ESModule需要通过babel转换才能在Webpack中使用。然而，Webpack 2.0版本的发布，完全支持ESModule标准，不需要任何转换或者插件。下面我们来详细介绍一下如何使用ESModule并通过Webpack构建我们的应用程序。

配置entry和output

在Webpack中，我们需要配置entry和output以指明项目的入口和出口。如果入口文件是ESModule，则需要在entry中指定文件扩展名为“.mjs”或“.js”（后缀为“.mjs”是ESModule的推荐规则）。默认情况下Webpack将使用“main”属性作为entry，但是对于ESModule，我们需要使用“module”属性。

// www.javascriptcn.com code example
module.exports = {
  entry: {
    app: './src/index.mjs',
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
  },
}

配置resolve.alias

由于ESModule是动态加载的，Webpack需要知道如何解决依赖关系。我们可以使用resolve.alias来告诉Webpack如何解析依赖。下面的配置可以让Webpack顺利读取ESModule：

module.exports = {
  resolve: {
    extensions: ['.js', '.mjs'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

配置target

Webpack支持将代码打包成Node.js环境和Web浏览器环境可用的通用代码，我们需要使用“target”属性来告诉Webpack我们打包的目标环境。要将代码打包成ES5语法的JavaScript，我们可以设置“target”属性为“web”。

module.exports = {
  target: 'web',
  // ...
};

配置babel

如果我们想要兼容所有浏览器，我们需要将我们的代码转换成ES5语法的JavaScript。Babel是一个流行的Node.js工具，可以将ES6/ES7的代码转换成兼容的ES5代码。

我们需要在Webpack中安装babel-loader和相关的依赖：

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

接着在Webpack中添加babel-loader的配置项：

// www.javascriptcn.com code example
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [['@babel/plugin-transform-runtime', { corejs: 3 }]],
          },
        },
      },
    ],
  },
};

这个配置将Webpack的.babelrc文件合并到了webpack.config.js中。 @babel/preset-env根据我们的目标环境来确定最佳的转换方式，而@babel/plugin-transform-runtime运行时将ES6/ES7的新特性从复杂的工具函数中提取出来，以便我们的代码更加简洁。

示例代码

下面是一个简单的示例，演示在Webpack中使用ESModule标准：

index.js

import { add } from './math';

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

math.js

export const add = (a, b) => a + b;

webpack.config.js

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  entry: {
    app: './src/index.mjs',
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.js', '.mjs'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [['@babel/plugin-transform-runtime', { corejs: 3 }]],
          },
        },
      },
    ],
  },
  target: 'web',
};

指导意义

ESModule作为新的JavaScript模块化方案，将逐渐取代现有的CommonJS和AMD等规范，成为前端开发的主要标准之一。Webpack对于ESModule标准的支持，可以让我们更加便捷地使用ESModule来组织我们的代码。在Webpack中配置ESModule需要注意以下几点：

配置entry和output，以指明项目的入口和出口。
配置resolve.alias，告诉Webpack如何解析依赖。
配置target，将代码打包成ES5语法的JavaScript。
配置babel-loader，将我们的代码转换成ES5语法的JavaScript。

以上就是Webpack中对于ESModule标准的支持的详细介绍，希望可以帮助大家更好的使用ESModule，在实际项目中提升代码的可维护性、可测试性和可靠性。

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

Webpack 中对于 ESModule 标准的支持