如何导出函数使其可同时被import和require正常调用

问题根源 #

• ES Module（浏览器/前端工程用的export/import）和CommonJS（Node.js/Mocha用的module.exports/require）是两套不兼容的模块规范，直接用单一种导出方式会导致另一环境报错。
• 你之前写module.exports = proses时用import { proses }导入报错，是因为CommonJS默认导出的内容在ES模块导入时会被挂载到default属性上，解构的proses属性不存在所以返回undefined。
• 你直接写export function proses时Mocha报错，是因为Mocha默认以CommonJS规范解析.js文件，识别不了ES模块语法。

最优解决方式：手写UMD兼容导出 #

直接修改query.js的导出逻辑，无需修改你现有两处引入代码，还支持直接在HTML中全局调用：

// query.js
function proses(data) {
  // 此处保留你原有的函数逻辑
}

// 多环境兼容导出逻辑
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
  // 适配CommonJS环境（Mocha测试用）
  module.exports = proses;
  // 额外挂载属性适配ES模块命名导入
  module.exports.proses = proses;
  module.exports.default = proses;
} else {
  // 适配浏览器环境，直接挂载到window全局，可直接在HTML中调用
  window.proses = proses;
}

适配效果 #

• test.js 中的var proses = require('../public/static/query'); 可正常调用
• index.js 中的import { proses } from '../public/static/query.js' 可正常调用，也支持默认导入写法import proses from '../public/static/query.js'
• 直接在HTML中引入<script src="query.js"></script>后，可直接调用proses()方法

可选方案（需调整配置） #

如果你的Node.js版本在14.13.0以上，也可以在项目package.json中增加导出配置，同时把.js改为ESM规范：

1. 项目根目录package.json添加配置：

{
  "type": "module",
  "exports": {
    "import": "./query.js",
    "require": "./query.cjs"
  }
}

2. 新增query.cjs文件写入CommonJS导出逻辑：

// query.cjs
module.exports = require('./query.js').proses;

3. 运行Mocha时添加参数：mocha --experimental-specifier-resolution=node
   这种方式不需要改原有导出写法，但需要调整运行配置，通用性不如UMD方案。

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