如何在Vue项目中引入Browserify编译的JS模块并将其改造为可通过import导入的规范模块

我明白你现在的困境：原来的JS模块是通过Browserify编译的，只能通过script标签挂全局ENCOM对象，但在Vue项目里用import/require导入时，npm命令直接卡住，改了几种导出写法也编译失败。下面给你一步步解决的方案：

第一步：改造模块入口文件（原browserify.js） #

原来的文件只是单纯往全局挂载对象，现在要改成同时支持ES模块导出和原有全局挂载的写法，既不破坏旧的script引入方式，也能让Vue项目正常导入。修改后的代码如下：

// 先导入核心的Globe模块
import Globe from './src/Globe.js';

// 保留原有全局挂载逻辑（兼容script标签引入的场景）
if (typeof window !== 'undefined') {
  window.ENCOM = window.ENCOM || {};
  window.ENCOM.Globe = Globe;
}

// ES模块导出，支持import语法
export default Globe;
// 如果需要命名导出，也可以加上这行
export { Globe };

为什么之前的写法报错？ #

你之前直接用require('./src/Globe.js')然后导出，大概率是因为：

• 原src/Globe.js依赖Browserify注入的全局变量或浏览器环境（比如window），在Vue的打包工具（webpack/vite）编译时，node环境下没有这些变量，导致编译卡住或报错；
• 直接导出require的结果，没有处理模块的加载时机，打包工具无法正确解析模块依赖。

第二步：在Vue项目中正确导入 #

现在你可以在Vue项目里用标准的ES模块语法导入了：

方式1：默认导入（推荐） #

在main.ts或者组件中：

import Globe from './assets/globe/browserify.js';

// 如果需要全局使用，可以挂载到Vue app的全局属性
createApp(App)
  .use(store)
  .use(router)
  .config.globalProperties.$Globe = Globe
  .mount('body');

方式2：命名导入 #

如果你在入口文件里加了export { Globe }，可以这样导入：

import { Globe } from './assets/globe/browserify.js';

特殊情况：模块依赖浏览器环境 #

如果Globe.js必须在浏览器环境下才能初始化（比如依赖document或其他浏览器API），建议用动态导入延迟加载，避免在node编译阶段执行：

// 在组件的mounted钩子中导入
async mounted() {
  const { default: Globe } = await import('./assets/globe/browserify.js');
  // 这里初始化和使用Globe
}

第三步：适配Vue打包工具（可选） #

如果你的Vue项目用的是Vite，而src/Globe.js是CommonJS格式的，可能需要在vite.config.js里配置依赖预构建：

export default {
  optimizeDeps: {
    include: ['./src/Globe.js']
  }
}

如果是Vue CLI（Webpack），一般不需要额外配置，Webpack会自动处理CommonJS模块。

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