如何在JSX文件中调用非ES6规范的NPM模块函数？

别担心，这种情况我也碰到过——有些模块开发的时候没做好导出配置，只扔了个dist文件夹的源码。下面给你几个可行的解决办法，一步步来：

1. 直接导入dist文件夹里的源码文件 #

首先找到你装的模块在node_modules里的位置，定位到dist文件夹里的核心JS文件（通常叫main.js、index.js或者和模块同名的js文件）。然后在你的JSX里直接导入这个文件的路径：

// 写法一：用相对路径指向node_modules里的目标文件
import '../node_modules/your-module-name/dist/main.js';

// 写法二：如果你的构建工具（Webpack/Vite等）支持模块自动解析，也可以简化写
import 'your-module-name/dist/main.js';

这类模块一般会把函数挂载到全局变量（比如浏览器环境的window对象）上，导入之后直接调用全局变量就行：

// 假设模块暴露的全局函数集合叫MyModuleTools
const data = window.MyModuleTools.targetFunction();

要是不知道全局变量叫啥，直接打开dist里的JS文件看看，通常末尾会有window.XXX = ...或者global.XXX = ...的代码，XXX就是你要找的变量名。

2. 给构建工具配置别名更方便 #

如果不想每次都写长长的dist路径，可以给你的构建工具加个别名，让它自动指向dist文件。举两个常见工具的配置例子：

Vite配置 #

在vite.config.js里添加resolve.alias：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // 让导入"your-module-name"时自动指向dist核心文件
      'your-module-name': 'your-module-name/dist/main.js'
    }
  }
});

之后在JSX里直接导入模块名就行：

import 'your-module-name';
// 调用全局函数
window.MyModuleTools.targetFunction();

Webpack配置 #

在webpack.config.js里配置resolve.alias：

const path = require('path');

module.exports = {
  // ...其他配置项
  resolve: {
    alias: {
      'your-module-name': path.resolve(__dirname, 'node_modules/your-module-name/dist/main.js')
    }
  }
};

3. 手动包装模块（更优雅的方式） #

如果不想每次都依赖全局变量，你可以自己写个包装文件，把全局函数转成ES模块导出：

// 比如在src/utils/wrap-my-module.js里
import 'your-module-name/dist/main.js';

// 把全局变量里需要的函数单独导出
export const targetFunction = window.MyModuleTools.targetFunction;
export const helperFunction = window.MyModuleTools.helperFunction;

然后在JSX里直接导入这个包装好的模块：

import { targetFunction } from './utils/wrap-my-module.js';

// 直接调用函数就行
const result = targetFunction();

额外提醒 #

• 尽量不要修改node_modules里的模块文件（比如给它加exports配置），因为下次执行npm install会覆盖你的修改。
• 如果模块确实完全没做导出逻辑，以上方法基本能解决问题；要是还是不行，你可以仔细看看dist文件的代码结构，比如是不是IIFE格式、有没有暴露其他全局对象。

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