Mocha无法访问gulp+browserify打包后JS文件内的函数如何解决

你遇到的报错核心是browserify默认打包逻辑不会对外暴露模块导出：

• browserify的设计初衷是为浏览器端提供模块化打包能力，默认会把所有TS编译后的JS模块封装在自执行闭包中，所有export、module.exports默认只会在包内部的模块系统流通，不会挂载到CommonJS的导出对象上，因此你直接require打包后的appBundled.js时，拿到的是无对应导出的空对象，自然会报函数不存在的错误。
• 独立编译场景下每个TS文件单独输出为JS，保留了原有的模块导出结构，因此require可以正常读取到你写的导出内容，所以测试可以正常运行。
• 另外你当前app.ts混用了ESModule的export和CommonJS的module.exports两种导出规范，也会提升导出丢失的概率。

1. 统一导出规范，明确指定入口文件要暴露的所有内容 #

修改app.ts的导出写法，不要混用两种模块规范，把所有需要对外暴露的内容统一挂载：

import { separated } from './separated';

function getData(value: number): boolean {
  if (value > 1) {
    return true;
  }
  return false;
}

function getAnotherData(value: number): boolean {
  return separated.getDataFromSeparated(value);  
}

// 统一导出所有需要外部访问的内容
module.exports = {
  getData,
  getAnotherData,
  separated
}

2. 调整gulp的browserify打包配置，开启standalone模式 #

在gulp调用browserify的配置项中添加standalone参数，该参数会让browserify把入口文件的导出挂载到CommonJS的导出对象上，允许外部require正常读取：

// 你的gulp打包任务参考配置
const browserify = require('browserify');
const tsify = require('tsify');
const source = require('vinyl-source-stream');

gulp.task('bundle', function () {
  return browserify({
    basedir: '.',
    entries: ['src/app.ts'], // 替换为你实际的入口文件路径
    debug: true,
    // 新增以下配置项
    standalone: 'appBundle'
  })
  .plugin(tsify)
  .bundle()
  .pipe(source('appBundled.js'))
  .pipe(gulp.dest('dist'));
});

3. 调整测试文件引入逻辑 #

打包后require拿到的是入口文件导出的完整对象，直接解构使用即可，同时注意你原有的assert.ok参数顺序有误（第一个参数是要校验的表达式，第二个是可选的错误提示），也同步修正：

const { getData, getAnotherData, separated } = require('./dist/appBundled');
const assert = require('assert');

describe('Test Suite 21 - functions', function () {
  it('getData - from module', function () {
    assert.ok(getData(2));
  })

  it('getAnotherData - from export', function () {
    assert.ok(getAnotherData(2));
  })

  it('separated.getData', function () {
    assert.ok(separated.getDataFromSeparated(2));
  })
})

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