vue-sfc-library

Packaging Vue.js components for npm

Project structure

package.json
build/
   rollup.config.js
src/
   wrapper.js
   my-component.vue
dist/

package.json

{
  "name": "my-component",
  "version": "1.2.3",
  "main": "dist/my-component.umd.js",
  "module": "dist/my-component.esm.js",
  "unpkg": "dist/my-component.min.js",
  "browser": {
    "./sfc": "src/my-component.vue"
  },
  "scripts": {
    // !! Build path와 위의 main, module, unpkg의 경로가 같아야함 !!
    "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/my-component.umd.js",
    "build:es": "rollup --config build/rollup.config.js --format es --file dist/my-component.esm.js",
    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/my-component.min.js"
  },
  "devDependencies": {
    "node-sass": "^4.12.0",
    "rollup": "^1.15.6",
    "rollup-plugin-buble": "^0.19.6",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-vue": "^5.0.0",
    "sass-loader": "^7.1.0",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10",
    ...
  },
  ...
}

wrapper.js

필요한 컴포넌트를 빌드하기 위해 wrapper.js를 통해 묶어줌 (혹은 필요 로직 구현)

// Vue 컴포넌트 import
import Component1 from './a.vue'
import Component2 from './b.vue'
import Component2 from './c.vue'
 
const components = {
  Component1,
  Component2,
  Component3
}
 
// Vue.use()에서 실행될 함수 선언
export function install(Vue) {
    if (install.installed) return
  install.installed = true
 
  Object.keys(components).forEach(name => {
    Vue.component(name, components[name])
  })
}
 
// Vue.use()를 위해 모듈 정의 생성
const plugin = {
    install
}
 
// 브라우저 환경에서 Vue가 있다면 Auto-install 진행
let GlobalVue = null
if (typeof window !== 'undefined') {
    GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue
}
if (GlobalVue) {
    GlobalVue.use(plugin)
}
 
// 모듈로 사용하는것을 허용
export components

rollup.config.js

import commonjs from 'rollup-plugin-commonjs' // commonjs
import vue from 'rollup-plugin-vue' // SFC 제어
import buble from 'rollup-plugin-buble' // 브라우저를 위해 트랜스파일, 폴리필 적용
 
export default {
  input: 'src/wrapper.js', // entry
  output: {
    name: 'Vest', // 라이브러리명
    exports: 'named'
  },
  plugins: [
    commonjs(),
    vue({
      css: true, // style 태그의 스타일을 js 파일에 주입 (inline)
      compileTemplate: true // 템플릿을 render 함수로 변환
    }),
    buble() // ES5로 트랜스파일
  ]
}

Build

npm run build