How does Vue introduce the JS module compiled by browserify?

Question

Here is a JS module compiled using browserify: repo

It can be introduced in the browser through the script tag. After introduction, it will add an object named 'ENCOM' to the global object.

I try to import directly in Vue project through 'import' & 'require'.As a result, npm run serve/build/lint will get stuck. (can be cancelled by Ctrl + C)

This is how I import:

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

// Delete this line and the project can start normally
import './assets/globe/index'

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

I noticed that there is a configuration file of browse, which is as follows:

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

I tried to change it to this, but I couldn't compile it:

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

So how can I modify it so that it can become a JS module that can be imported through import?