微信小程序Requires中如何正确引入和使用外部JS模块？

Question

在微信小程序开发中，如何正确使用`require`引入和调用外部JS模块是一个常见问题。许多开发者会遇到模块无法加载或功能异常的情况。主要原因是微信小程序对`require`的使用有特定限制：只能用于页面外的独立JS文件，且路径需为相对路径。例如，若要在`app.js`中引入`utils/util.js`，应写为`const util = require('./utils/util.js')`。此外，被引入的JS模块需通过`module.exports`或`exports`导出功能，否则`require`将返回空对象。还需注意，`require`不能直接加载非JS资源（如JSON、图片等），必须借助小程序提供的API或转换为JS模块形式。最后，避免循环依赖，即A模块require B模块，同时B又require A，这会导致模块加载失败或数据不完整。

Answer 1

1. 基础认知：微信小程序中 `require` 的使用

在微信小程序开发中，`require` 是一个常见的模块引入方法。它主要用于加载页面外的独立 JS 文件，并通过相对路径进行引用。

• `require` 只能用于页面外的独立 JS 文件，不能直接在 WXML 或 WXSS 中使用。
• 路径必须为相对路径，例如：const util = require('./utils/util.js');
• 被引入的模块需要通过 module.exports 或 exports 导出功能，否则返回空对象。

module.exports = {
      add: function(a, b) { return a + b; }
    };

2. 问题分析：常见错误及原因

开发者在使用 `require` 时，常常会遇到模块无法加载或功能异常的问题。以下是几个典型场景及其原因：

问题	可能原因
模块未正确导出	未使用 module.exports 或 exports 导出内容。
路径错误	路径书写不正确，如缺少 './' 或文件名拼写错误。
非 JS 资源加载失败	尝试直接加载 JSON、图片等非 JS 资源。

3. 深入探讨：如何正确使用 `require`

为了避免上述问题，我们需要遵循以下规则：

1. 确保模块文件通过 module.exports 或 exports 正确导出。
2. 使用相对路径引用模块，避免路径错误。
3. 对于非 JS 资源，可以借助小程序提供的 API 或将其转换为 JS 模块形式。

示例代码：

// utils/util.js
module.exports = {
  formatTime: function(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return [year, month, day].map(formatNumber).join('-');
  }
};

// app.js
const util = require('./utils/util.js');
console.log(util.formatTime(new Date()));

4. 高级注意事项：循环依赖与性能优化

循环依赖是指 A 模块 `require` B 模块，而 B 模块又 `require` A 模块。这种情况下，可能会导致模块加载失败或数据不完整。

解决方法：

• 重构代码，避免循环依赖。
• 如果无法避免，可以通过将共享逻辑提取到单独的模块中解决。

流程图示例：

graph TD;
            A[模块A] -->|require| B[模块B];
            B -->|require| A;
            C[解决方法] --> D[提取公共逻辑];
            D --> E[新模块C];
            A -->|require| E;
            B -->|require| E;