近年来，随着前端开发变得越来越复杂和“模块化”，ES6 模块已经成为了众多开发者的选择，对于使用 Babel 编译 ES6 代码的开发者，将 ES6 模块打包成 ES Module 模块可以更好地利用浏览器的原生模块机制，提高代码性能和打包体积。本文将介绍如何使用 Babel 编译 ES6 代码时支持打包成 ES Module 模块。
安装 Babel 相关插件
首先，需要安装 @babel/preset-env 和 @babel/plugin-transform-modules-systemjs 插件。
npm install --save-dev @babel/core @babel/preset-env @babel/plugin-transform-modules-systemjs
配置 Babel 预设
在 .babelrc 文件中，配置 Babel 预设，使其能够将 ES6 代码转换成 ES Module 模块。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
------------ ----
-
-
-
--
---------- -
-
-------------------------------------------
-
------------- -----------
-
-
-
-@babel/preset-env 的 "targets": {"esmodules": true} 配置告诉 Babel 在编译时将代码转换成 ES Module。
@babel/plugin-transform-modules-systemjs 插件则将转换后的代码打包成一个名为 "my-module" 的 ES Module 模块。开发者可以根据自己的需求修改模块名称。
示例代码
为了更好地理解上面的配置，我们来看一个实际的示例代码。
-- -------------------- ---- ------- -- ------- ------ -------- ------ -- - ------ - - -- - -- ------- ------ ----- ---- ------------ ------------------ ----
在 package.json 中配置打包脚本：
{
"scripts": {
"build": "babel main.js -o dist/main.js"
}
}运行 npm run build 命令后，打包后的代码如下所示：
-- -------------------- ---- -------
------------------- -------- --------- --------- -
---- --------
--- ----
------ -
-------- ---
-------- -------- -- -
-------- ------------------------- ------------ -
-- ----------- ---------- ------------- -
----- --- ----------------- ---- - ----- -- - -----------
-
-
-------- ------------------------- ------ -
--- ---- - - -- - - ------------- ---- -
--- ---------- - ---------
--------------------- - --------------------- -- ------
----------------------- - -----
-- -------- -- ----------- ------------------- - -----
----------------------------- --------------- ------------
-
-
-------- ------------------------- ----------- ------------ -
-- ------------ ---------------------------------------- ------------
-- ------------- ------------------------------ -------------
------ ------------
-
-------- ------ -- -
------ - - --
-
-------------- -----
--- ---- - --------------------- -- -
-------- ------ -
--------------------- ------
-
------------------ ----- --
---- -------
------ -------- ------ -
------------------ ----
-
----
------ -----
----
------------------- ------
-
--
---在浏览器中加载打包后的代码，便可直接使用 ES6 的模块导入语法，将 main.js 和 math.js 文件作为 ES6 模块导入。
<script type="module">
import { main } from './dist/main.js';
main();
</script>到此，我们成功地将 ES6 模块打包成了 ES Module 模块，可以更好地利用浏览器的原生模块机制。
总结：在前端开发中，模块化已经是不可避免的趋势，ES6 模块也逐渐成为了前端开发者的标配。当使用 Babel 编译 ES6 代码时，我们可以更好地支持打包成 ES Module 模块，使得我们的代码更加高效和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9a4d3f6b2d6eab34dba40