在现代的前端开发中，我们经常需要使用模块化的编程方式来组织我们的代码。而随着 ECMAScript 6 的普及，使用 JavaScript 模块已经成为了前端最常用的模块化方式。然而，由于浏览器对 ES6 模块的支持并不完整，我们常常需要使用工具来转换模块化代码。
mjs-require 是一个 npm 包，它提供了一种简单的方式来在浏览器中使用 ES6 模块。本文将介绍如何安装和使用 mjs-require。
安装
安装 mjs-require 是非常简单的，只需要在你的项目中运行以下命令即可：
npm install mjs-require
使用
假设我们有以下的 ES6 模块代码：
// utils.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}// index.js
import { add, subtract } from './utils.js';
console.log(add(1, 2));
console.log(subtract(2, 1));如果直接在浏览器中运行这个代码，会发现浏览器会报错，因为它不支持 ES6 模块。这时我们可以使用 mjs-require 来替换 import 导入语句。
首先，我们需要引入 mjs-require：
<script src="node_modules/mjs-require/dist/mjs-require.js"></script>
然后，在 index.js 中将 import 改为 require：
// index.js
const { add, subtract } = require('./utils.js');
console.log(add(1, 2));
console.log(subtract(2, 1));最后，在浏览器中打开 index.html，就可以看到正确的输出结果了。
注意，mjs-require 只支持相对路径的导入，因此我们需要确保引用的路径正确。
指导意义
mjs-require 是一个非常简单的工具，它可以帮助我们在浏览器中使用 ES6 模块化代码。虽然它的功能比较简单，但它启示我们，在前端开发中，我们可以通过工具来扩展浏览器支持的功能，提高我们的开发效率。同时，我们也需要注意，过多地依赖工具也可能会对代码的可读性和可维护性造成影响，因此我们需要在实际开发中权衡利弊，谨慎使用工具。
示例代码
以下是完整的示例代码，你可以将它复制到一个 HTML 文件中并在浏览器中运行：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------------- ------- ------ ------- ------------------------------------------------------------ -------- ----- - ---- -------- - - ---------------------- ------------------ ---- ----------------------- ---- --------- ------- ------- ---- -------- --- ------ -------- ------ -- - ------ - - -- - ------ -------- ----------- -- - ------ - - -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e0575