背景
在前端开发中，模块化是一个非常重要的概念。Require.js 是一个比较流行的 JavaScript 模块化加载器。它可以让你在浏览器中运行 node.js 风格的模块系统。
然而，Require.js 在实践中并不总是完美的。它存在一些缺陷，例如：
- 语法复杂
- 异步加载过程繁琐
- 不能直接使用 ES6 模块
- 只支持 AMD 和 CommonJS 两种模块规范
在 ES6 中，为了解决这些问题，提供了一套新的模块系统。在本文中，我们将讨论如何使用 ES6 模块来代替 Require.js。
ES6 模块简介
ES6 模块使用 export 和 import 语句来导出和导入模块，例如：
// 导出模块
export const pi = 3.14;
// 导入模块
import {pi} from './math';在导入模块时，支持以下几种导入方式：
- 导入一个模块的所有成员（*）
- 从一个模块中选择特定的成员（{}）
// 导入模块所有成员
import * as math from './math';
// 导入模块中特定的成员
import { cos, sin } from './math';js 文件也可以作为模块来导入和导出，例如：
// myModule.js
const name = '德玛西亚';
const age = 30;
export { name, age };
// app.js
import {name, age} from './myModule.js';使用 ES6 模块来代替 Require.js
1. 安装 ES6 模块支持的编译工具
由于现代浏览器还不完全支持 ES6 模块语法，所以我们需要使用编译工具来将其转换成浏览器支持的语法。
这里我选择使用 Babel 进行编译，你也可以选择其他编译工具。
首先，我们需要安装 Babel：
npm i -D babel-cli babel-preset-env
然后，配置 Babel 使用 babel-preset-env 预设，即可自动转换 ES6 模块语法：
{
"presets": [
["env", {
"modules": false
}]
]
}2. 定义模块
我们在 utils.js 中定义一个模块，导出一个加法函数：
// utils.js
export function add(a, b) {
return a + b;
}3. 导入模块
在我们的 app.js 中，导入 utils.js 中定义的模块，并使用其中的函数：
// app.js
import { add } from './utils';
const result = add(1, 2);
console.log(result); // 3在这个示例中，我们使用 import 语句导入了 utils.js 中的 add 函数。然后，在 app.js 中使用该函数进行加法运算。
总结
在 ES6 中，使用模块化来组织代码已经变得更加简单和直接。我们可以使用 ES6 模块来代替 Require.js，并且不需要处理异步加载和语法复杂的问题。只需要定义和导入模块，然后就可以在任何地方使用它们了。
在实际开发中，可以通过编译工具将 ES6 模块语法转换成浏览器支持的语法，从而实现在浏览器中直接运行代码的目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461f0a0968c7c53b0345ed3