将RequireJS规范JS与普通JS合并为单文件加载的实现方法

完全可以实现将4个JS文件合并为单个bundle.js，仅发起一次HTTP请求完成加载，以下是两种可行方案：

方案一：使用RequireJS官方优化工具r.js打包（推荐） #

前3个JS为AMD规范模块，用RequireJS官方的打包工具处理兼容性最好，步骤如下：

• 本地安装r.js：

npm install -g requirejs

• 新建构建配置文件build.js，填入以下内容（按你本地文件存放路径调整对应参数）：

({
  // 存放4个源JS文件的本地目录路径
  baseUrl: "./your-js-dir",
  // 要打包进bundle的所有模块/文件
  include: ["ace", "ext-language_tools", "mode-mongo", "playground"],
  // 输出的打包文件路径
  out: "./dist/bundle.js",
  // 不需要压缩就设为none，需要压缩就设为uglify2
  optimize: "none"
})

• 执行打包命令：

r.js -o build.js

• 调整HTML代码：原来window.onload里的ace.config.setModuleUrl("ace/mode/mongo", "mode-mongo.js")行可以直接删除，因为mode-mongo模块已经打包进了bundle.js，不需要再单独加载，刚好和你期望的目标HTML结构一致。

方案二：手动拼接（适合不想引入构建工具的场景） #

因为前3个AMD模块依赖ACE核心先加载定义define函数，所以只要按以下顺序拼接4个文件的内容即可：

1. ace.js
2. ext-language_tools.js
3. mode-mongo.js
4. playground.js
   拼接完成后将内容保存为bundle.js即可直接使用，同样需要删除HTML里的setModuleUrl配置行。

两种方案最终都可以满足你只加载单个JS文件的需求，上线前还可以对bundle.js做压缩处理，进一步减小体积。

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