请问 vue 如何引入由 browserify 编译的 JS 模块？

Question

这里有一个使用 browserify 编译的 JS 模块：
https://github.com/arscan/enc...

它可以在浏览器内通过 script 标签引入，引入之后会在 window 对象上就多了一个 window.ENCOM。

我尝试直接在 vue 项目内通过 import/require 导入 ，结果就是 npm run serve | build | lint 都会卡住。（可以ctrl+c取消）

/* main.ts */
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/globe/index'
import 'boxicons'

createApp(App).use(store).use(router).mount('body')

我注意到了这里有个 browserify 的配置文件，他是这样的：

/* browserify.js */
window.ENCOM = (window.ENCOM || {});
window.ENCOM.Globe = require('./src/Globe.js');

我尝试修改为这样，但无法通过编译:

const Globe = require('./src/Globe.js')
export default Globe /* 报错 */
export { Globe } /* 报错 */
export default require('./src/Globe.js') /* 报错 */
export { require('./src/Globe.js') } /* 报错 */

那么我应该如何修改，才可以让他变成一个可以通过 import 导入的JS模块？
求解，万分感谢！！！！

Answer 1

这个库有在npm上发布：安装一下：npm i encom-globe;
看一下这个包的package.json，main指向的是"main": "src/Globe.js"，也就是说默认导出的不是打包后的文件，然后找到这个Globe.js：最后一行：module.exports = Globe;，
说明是commonjs规范，这就简单了，直接引入const Globe = require('encom-globe');就ok了。