介绍
在前端开发中，我们经常需要使用模块化的方式来管理代码，而在 Node.js 中，我们通常使用 CommonJS 规范来实现模块化。然而，在浏览器端，由于缺少 CommonJS 支持，我们需要通过一些工具来将 CommonJS 模块转换成浏览器可用的格式，例如 AMD 或 ES6 模块。
其中，commonjs-everywhere 就是一个非常好用的工具，它可以将 CommonJS 模块转换成适用于浏览器端和 Node.js 端的模块。
安装
你可以通过 npm 来安装 commonjs-everywhere：
npm install -g commonjs-everywhere
使用方法
命令行
commonjs-everywhere 的命令行接口非常简单，只需要指定要转换的文件或目录即可：
commonjs-everywhere <file|dir>
例如，我们有一个 CommonJS 模块 foo.js：
// foo.js exports.add = function(a, b) { return a + b; };
我们可以直接使用 commonjs-everywhere 将其转换为浏览器可用的模块：
commonjs-everywhere foo.js
这样会生成一个新文件 foo-browser.js：
-- -------------------- ---- ------- -- -------------- ----------- - --- ------- - --- --- ------ - - -------- ------- -- ----------- - ----------- -- - ------ - - -- -- -- ------- ------ --- ---------- -- ----------- - ----------------- - ------ -------- --- - ---- -- ------- ------ --- -------- -- --------------- - -------------- - -------- - ---- - -------- - -------- - -----展开代码
你可以在浏览器端使用 foo-browser.js 来加载这个模块：
<script src="foo-browser.js"></script> <script> var foo = require("foo"); console.log(foo.add(1, 2)); // Output: 3 </script>
API
除了命令行接口之外，commonjs-everywhere 还提供了一个简单的 API 接口，你可以通过它来进行一些自定义操作。
-- -------------------- ---- ------- ----- -------- - ------------------------------- -- ------ -------------------------------- ------------------- ------------- - -- ----- ----- ---- --------------------- --- -- --------- ---------------------------------- --------- ------------- - -- ----- ----- ---- --------------------- ---展开代码
示例代码
以下是一个示例，我们将两个 CommonJS 模块合并成一个浏览器可用的模块：
-- -------------------- ---- ------- -- ------ ----------- - ----------- -- - ------ - - -- -- -- ------ ----------- - ----------- -- - ------ - - -- -- -- ------- --- --- - ----------------- --- --- - ----------------- ------------ - ----------- -- - ------ ------------------ --- --- -- -- ----------- ---------------------------------- --------- ------------- - -- ----- ----- ---- --------------------- ---展开代码
转换后的文件 main-browser.js：
-- -------------------- ---- ------- ----------- - --- ------- - --- --- ------ - - -------- ------- -- -- ------ ----------- - ----------- -- - ------ - - -- -- -- ------ ----------- - ----------- -- - ------ - - -- -- -- ------- --- --- - ------------ --- --- - ------------ ------------ - ----------- -- - ------ ---------- --- --- -- -- ------- ------ --- ---------- -- ----------- - ----------------- - - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
