[컴] umd module js 를 vue에서 import 하기 위한 방법

vue 에서 library / npm library 직접 js library import / how to / import .js lib

umd module js 를 vue에서 import 하기 위한 방법

vue component 에서 import 해서 사용 하는 법 몇가지를 적어보려 한다.

만약 MyModule 이라는 umd module 를 import 한다고 가정하자. 그럼 다음 2가지 방법을 사용해 볼 수 있다.

1. vue component 에서 import 를 하고 window.MyModule 을 이용한다.
2. vue plugin 으로 app.use(MyModulePlugin) 을 이용해서 vue component 에서 사용할 수 있게 해준다.

vue component 의 import

vue component 에서 사용하는 import 는 ES6 의 import 라고 볼 수는 없다. 그것은 vite(또는 webpack)을 거치기 때문에, 그 bundler 가 한번 처리한 후의 상황에 달려있다. 그래서 다음 2가지 경우가 있을 듯 하다.

1. import 가 vite 가 처리된 이후에도 남아있다면, 그 import 가 web browser 에서 ES6 의 import 로 사용될 수는 있다.
2. vite 가 bundling 을 할 때 그 import 를 이용해서 하나의 chunk 로 묶는 데 사용되고 사라진다.

window.MyModule 사용

umd module 을 vue 의 component 에서 직접적으로 아래처럼 import 를 했다.

여기서는 @editorjs/image 라는 editor.js 의 plugin module 이 있는데, 이 module 의 ‘dist’ 에 있는 .js 를 직접 사용해보는 code이다.

이 경우에 browser에서 확인해보면 window.ImageTool 에 load 를 하게 된다. 이 경우 window.ImageTool 로 접근해서 사용하면 된다.

// MyComponent.vue
<script>
import EditorJS from '@editorjs/editorjs'
// import ImageTool from '@editorjs/image'

import * as ImageTool from '@/utils/editor/bundle.dev.js'
// 아래 방법은 다 실패했다.
// import {ImageTool} from '@/utils/editor/bundle.dev.js'
// import ImageTool from '@/utils/editor/bundle.dev.js'
// const { ImageModule } = require('@/utils/editor/bundle-dev.js')
</script>

plugin 으로 import 한다.

또는 아래처럼 plugin 을 사용할 수 있다. 이 방법이 좀 더 깔끔해 보이긴 하다.

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from '@/router'

import * as ImageTool from '@/utils/editor/bundle-dev.js'

const ImageToolPlugin = function (Vue, options) {
  Vue.mixin({
    created: function () {
      console.log(this)
      this.ImageTool = ImageTool
    }
  })
}

const app = createApp(App)

app.use(createPinia())
app.use(ImageToolPlugin)
app.use(router)

app.mount('#app')

source 를 그대로 가져오기

만약 build 되기전 원본 소스가 있다면, 그냥 그것을 복사해서 import 하는 방법도 가능하다.

Reference

1. javascript - How to import Library into Vue3 project - Stack Overflow
2. Plugins | Vue.js