如何避免测试套件通过browserify嵌入被测代码？

1. 移除测试代码中对被测源码的导入，改用全局变量 #

把所有测试文件中类似import Dygraph from '../../src/dygraph';或import '../../src/extras/xxx';的语句删除，直接使用生产环境中dygraphs暴露的全局变量（比如window.Dygraph）。

比如原测试代码中的：

import Dygraph from '../../src/dygraph';
// 测试逻辑
const graph = new Dygraph(...);

改成：

// 直接使用全局Dygraph
const graph = new Dygraph(...);

对于extras下的模块，不再通过import引入，后续通过script标签加载即可——这些模块会自动扩展Dygraph的功能，测试代码无需额外处理。

2. 配置Browserify，排除被测源码的打包 #

修改Browserify的打包命令，确保它不会把src/目录下的代码打包进测试bundle中。如果用命令行打包，添加--external参数指定要排除的模块路径：

browserify -t babelify --external ./src/dygraph --external ./src/extras/export auto_tests/tests/*.js -o auto_tests/bundle.js

如果项目使用配置文件（比如browserify.config.js），可以在其中添加externals字段：

module.exports = {
  transform: ['babelify'],
  externals: [
    './src/dygraph',
    './src/extras/export',
    // 其他需要排除的src模块
  ]
};

如果不想全删测试代码里的require引用，还可以用browserify-shim插件将模块映射到全局变量：

1. 安装依赖：npm install browserify-shim --save-dev
2. 在package.json中添加shim配置：

"browserify-shim": {
  "./src/dygraph": "global:Dygraph",
  "./src/extras/export": "global:Dygraph"
},
"browserify": {
  "transform": ["browserify-shim"]
}

这样Browserify会把require('../../src/dygraph')替换为window.Dygraph，且不会打包源码。

3. 修改测试运行页面（runner.html），手动加载被测代码 #

在runner.html中，在加载测试bundle的script标签之前，添加加载被测源码的script标签，完全模拟生产环境的加载方式：

<!-- 先加载核心dygraphs代码 -->
<script src="../../src/dygraph.js"></script>
<!-- 加载需要测试的extras模块 -->
<script src="../../src/extras/export.js"></script>
<!-- 加载测试框架（如Mocha、Chai，若之前已存在则保留） -->
<link rel="stylesheet" href="mocha.css">
<script src="mocha.js"></script>
<script src="chai.js"></script>
<!-- 最后加载打包后的测试代码 -->
<script src="bundle.js"></script>

后续要测试压缩版JS时，只需把../../src/dygraph.js替换为压缩文件路径（比如../../dist/dygraph.min.js）即可。

4. 验证流程 #

执行原有的Babel+Browserify打包流程，此时生成的bundle.js仅包含转译为ES5后的测试代码，不再嵌入被测源码。运行PhantomJS测试时，测试代码会从全局环境获取Dygraph对象，和生产环境浏览器中的运行逻辑完全一致。

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