Ionic项目调用JS文件函数报'require is not defined'问题求助

问题根源 #

Ionic（基于Angular/Vite等现代构建工具）默认使用ES模块规范，而你的JS文件用了Node.js专属的CommonJS语法（require/module.exports），浏览器和前端构建环境不原生支持require，因此触发报错。

具体解决思路 #

1. 将JS文件转为ES模块格式（推荐）

直接修改JS文件的导入导出语法，适配前端模块环境：

• 原CommonJS格式的JS文件：

  const utility = require('./utility');
  function calculateTotal(numbers) {
    return utility.sum(numbers);
  }
  module.exports = { calculateTotal };
  

• 修改为ES模块格式：

  import { sum } from './utility.js';
  export function calculateTotal(numbers) {
    return sum(numbers);
  }
  

• 在TS文件中直接导入调用：

  import { calculateTotal } from './path/to/your/js-file.js';
  
  // 在组件或服务中调用
  const result = calculateTotal([1,2,3]);
  

2. 配置构建工具兼容CommonJS（无需修改JS文件）

如果无法修改目标JS文件（比如是第三方旧库），可以调整构建工具的配置：

• Angular（Ionic默认）：
  在tsconfig.json中开启CommonJS兼容选项：

  {
    "compilerOptions": {
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "moduleResolution": "node"
    }
  }
  

  若JS文件依赖了其他CommonJS包，在angular.json的构建配置中添加允许依赖：

  {
    "projects": {
      "your-app-name": {
        "architect": {
          "build": {
            "options": {
              "allowedCommonJsDependencies": ["lodash", "your-dependency-name"]
            }
          }
        }
      }
    }
  }
  

• Vite（新版Ionic）：
  在vite.config.ts中优化依赖处理：

  import { defineConfig } from 'vite';
  import ionic from '@ionic/vite-plugin';
  
  export default defineConfig({
    plugins: [ionic()],
    optimizeDeps: {
      include: ['path/to/your/js-file.js']
    }
  });
  

3. 使用动态import懒加载

无需修改JS文件，通过异步动态import处理CommonJS模块：

async function invokeJSFunction() {
  // 动态导入CommonJS模块
  const { calculateTotal } = await import('./path/to/your/js-file.js');
  const result = calculateTotal([4,5,6]);
  console.log(result);
}

// 调用异步函数
invokeJSFunction();

4. 全局脚本引入（应急方案）

将JS文件作为全局脚本引入，适合快速测试但不推荐用于生产：

• 在src/index.html中添加脚本标签（确保在TS代码之前加载）：

  <script src="path/to/your/js-file.js"></script>
  

• 在TS文件中声明全局函数类型，避免类型报错：

  declare function calculateTotal(numbers: number[]): number;
  
  // 直接调用全局函数
  const result = calculateTotal([7,8,9]);
  

额外排查点 #

• 确认TS文件的import路径正确，相对路径不要写错层级
• 执行ionic build --clean清理构建缓存，避免缓存导致的模块解析异常
• 检查JS文件的导出是否正确，确保module.exports导出了目标函数

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