如何使用RequireJS加载由多个JS文件构成的第三方模块？

Hey there! No worries at all being a JS newbie—we’ve all been there 😊 Let’s walk through how to package your main.js along with the multi-file foo module into a single browser-ready JS file using RequireJS’s build tool, r.js.

步骤1：安装RequireJS构建工具 #

首先你需要安装r.js，它是RequireJS的官方打包工具。你可以全局安装它，方便终端直接调用：

npm install -g requirejs

或者更推荐项目级本地安装，避免全局依赖冲突：

npm install requirejs --save-dev

如果是本地安装，后续运行命令时用npx r.js代替直接输入r.js即可。

步骤2：创建RequireJS构建配置文件 #

在项目根目录下新建一个build.js文件，这个配置文件是打包的核心，用来告诉r.js如何处理你的代码和第三方模块。重点要正确映射foo模块的路径，因为它的文件都集中在./node_modules/foo/dist/目录下。

假设foo模块的入口文件是dist/a.js（你可以查看foo的package.json里的main字段确认，要是没有明确配置，一般主文件是a.js或index.js），配置文件示例如下：

({
  // 指定你的入口文件（即你编写的main.js）
  mainConfigFile: './main.js',
  // 打包后输出的单文件路径
  out: './dist/bundle.js',
  // 模块路径映射：告诉RequireJS去哪里查找foo模块
  paths: {
    'foo': './node_modules/foo/dist/a'
    // 只要指向foo的入口文件，r.js会自动识别并打包它依赖的b.js、c.js
  },
  // 若foo是CommonJS风格的模块（用module.exports导出），开启此选项自动转成AMD格式
  cjsTranslate: true,
  // 生产环境推荐开启：压缩输出文件
  optimize: 'uglify2'
})

步骤3：调整main.js为AMD格式 #

浏览器环境下RequireJS遵循AMD规范，所以你的main.js要改成AMD写法，替代Node.js的CommonJS风格。示例：

// main.js
require(['foo'], function(foo) {
  // 这里写你使用foo模块的业务代码
  console.log('Successfully loaded foo module:', foo);
});

如果之前你用的是const foo = require('foo')这种写法，r.js的cjsTranslate选项可以帮你自动转换，但手动改成AMD格式会更稳妥。

步骤4：执行打包命令 #

在终端里运行构建命令：

# 全局安装r.js的情况
r.js -o build.js

# 本地安装的情况
npx r.js -o build.js

执行完成后，你会在指定的./dist/bundle.js路径下得到一个独立的JS文件，直接在HTML中用<script>标签引入就能在浏览器里正常使用了：

<script src="./dist/bundle.js"></script>

额外注意事项 #

• 如果foo的三个文件没有明确入口，或者依赖关系复杂，可以查看foo的官方文档，确认它的AMD模块ID规则，再对应调整paths配置。
• 若打包后出现模块找不到的错误，可以在build.js中添加logLevel: 2选项，查看详细打包日志，排查路径匹配问题。

内容的提问来源于stack exchange，提问作者Greg S