随着前端开发的发展和JS标准的不断更新，ES2015中推出的ESModule标准日益普及，尤其是在前端工程化中，Webpack作为强大的打包工具，在对ESModule标准支持方面做出了很大的努力。本文将讲解Webpack对于ESModule标准的支持，同时提供详细的示例代码以及指导意义。
什么是ESModule
ESModule（也称为ECMAScript模块）是ES2015中新增的模块化语法，它允许我们以一种可重复使用的方式分离和组件化我们的代码。与之前广泛使用的CommonJS和AMD等现有的解决方案不同，ESModule是基于静态分析的，并且支持在浏览器和Node.js环境下运行。ESModule最大的好处在于能够编写和使用更加可维护、可测试和可靠的代码。
以下是简单的ESModule语法：
-- -------------------- ---- ------- -- ----- ------ ----- - - -------- -- ----- ----- - - -------- ----- - - - -- - -- ------ - -- - -- -- -- ------ - -- -- - - ---- -----------展开代码
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”属性。
-- -------------------- ---- ------- -------------- - - ------ - ---- ------------------ -- ------- - --------- --------------------- ----- ----------------------- -------- -- -展开代码
配置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的配置项：
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- ---------- -------- ---------------------------------- ---- - ------- --------------- -------- - -------- ---------------------- -------- ------------------------------------ - ------- - ---- -- -- -- -- -- --展开代码
这个配置将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
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ - ---- ------------------ -- ------- - --------- --------------------- ----- ----------------------- -------- -- -------- - ----------- ------- -------- ------ - ---- ----------------------- ------- -- -- ------- - ------ - - ----- ---------- -------- ---------------------------------- ---- - ------- --------------- -------- - -------- ---------------------- -------- ------------------------------------ - ------- - ---- -- -- -- -- -- ------- ------ --展开代码
指导意义
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
