如何在优化后的require.js构建中动态加载外部脚本？

我之前折腾RequireJS生产构建的时候也踩过这个动态加载外部库的坑，结合你的场景给你梳理下问题原因和可行的解决办法：

问题根源 #

你现在的写法在开发环境（非优化构建）能正常运行，是因为RequireJS会直接发起HTTP请求去拉取CDN上的D3库；但当用r.js这类工具把代码打包成单个生产文件后，RequireJS的模块解析逻辑会发生变化——它默认会尝试从本地打包好的文件里查找模块，而不会主动去加载外部CDN资源，这就导致生产环境下动态加载失效。

具体解决办法 #

1. 构建配置中排除外部依赖 #

如果用r.js做生产构建，在你的构建配置文件（比如build.js）里，把外部库标记为不参与打包的依赖：

// build.js 配置示例
({
  baseUrl: "./src",
  name: "main", // 你的主入口模块
  out: "./dist/main-built.js", // 打包后的输出文件
  paths: {
    // 用`empty:`告诉r.js这个模块是外部资源，不要在本地查找
    "d3": "empty:"
  },
  exclude: ["d3"] // 明确排除D3，不让它被打包进本地文件
})

同时保持你原来的RequireJS配置不变：

require.config({
  paths: {
    "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min"
  }
});

require(['d3'], function(d3) {
  console.log("Works!")
});

这样生产构建后的代码会保留对D3的动态加载逻辑，依然会去请求你配置的CDN地址。

2. 环境区分式路径配置 #

如果你的项目有开发/生产环境的全局标识（比如通过构建工具注入window.__IS_PROD__），可以在RequireJS配置里做环境适配：

// 根据环境切换配置
const isProduction = window.__IS_PROD__ || false;

require.config({
  paths: {
    "d3": isProduction 
      ? "https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min"
      : "https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min" // 开发环境也可以用本地副本
  },
  // 给D3配置shim，确保RequireJS能正确识别全局导出的d3对象
  shim: {
    "d3": {
      exports: "d3"
    }
  }
});

require(['d3'], function(d3) {
  console.log("Works!")
});

这个方式能确保开发和生产环境的加载逻辑一致，同时生产环境不会把外部库打包进来。

3. 原生JS兜底方案 #

如果RequireJS的动态加载在生产环境还是有奇怪的问题，可以绕开RequireJS，用原生JS动态创建script标签加载外部库：

function loadD3(callback) {
  // 先检查是否已经加载过D3
  if (window.d3) {
    callback(window.d3);
    return;
  }
  const script = document.createElement('script');
  script.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js";
  script.onload = () => callback(window.d3);
  script.onerror = () => console.error("Failed to load D3 library");
  document.head.appendChild(script);
}

// 使用示例
loadD3(function(d3) {
  console.log("Works!");
  // 这里可以写你的D3逻辑
});

这个方案不受RequireJS构建逻辑的影响，兼容性也更好。

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