前言
随着浏览器的发展，前端技术和工具栈也日新月异。在这背后，其实是很多好用的 npm 包正在被开发和更新。其中一个非常实用的 npm 包就是 @babel/preset-modules。
@babel/preset-modules 是什么
@babel/preset-modules 是一个 Babel 插件套件，用于将现代 JavaScript 模块语法转换为与 ES5 兼容的语法，以便在旧版浏览器中使用。
安装 @babel/preset-modules
在 npm 中安装 @babel/preset-modules 很简单，只需要在终端中使用以下命令：
npm install --save-dev @babel/core @babel/preset-modules
使用 @babel/preset-modules
使用 @babel/preset-modules 也很简单，只需要在 .babelrc 文件中添加如下配置：
{
"presets": [
"@babel/preset-modules"
]
}使用示例
下面我们将通过一个简单的示例来演示如何使用 @babel/preset-modules。假设我们有一个名为 main.js 的 JavaScript 文件，其内容如下：
import moment from 'moment';
import _ from 'lodash';
const arr = [1, 2, 3];
console.log(_.sum(arr));
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));如果我们想要在旧版浏览器中使用这个 JavaScript 文件，我们就需要将其转换成 ES5 兼容的语法。我们可以通过添加 .babelrc 文件来配置 Babel，如下所示：
{
"presets": [
"@babel/preset-modules"
]
}之后，我们需要在终端中输入以下命令：
babel main.js --out-file main.es5.js
该命令将 main.js 转换成了 ES5 兼容的语法，并保存在 main.es5.js 中。main.es5.js 的内容如下：
-- -------------------- ---- ------- ---- -------- ------------------------------ ------------- - ------ ---- --- ------------------ - ---- -- --- ------- - ------------------------------------------ --- ------- - ------------------------------------------ -------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- - --- --- - --- -- --- ----------------------------------------- --------------- ---------------------------------- -- ----- ------- ----- --- -------- - ---- ------------------ - ---------
现在，我们可以将 main.es5.js 文件用于旧版本浏览器中了。
总结
通过本文，我们了解了 @babel/preset-modules 是一个用于将现代 JavaScript 模块语法转换为与 ES5 兼容的语法的 npm 包。使用它非常简单，同时，我们也通过一个实际示例来演示了如何使用它。无论你是刚开始学习前端还是有经验的前端工程师，@babel/preset-modules 都是一个非常实用的 npm 包，值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106029