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": "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๋ฅผ ํตํด ๋ฌถ์ด์ค (ํน์ ํ์ ๋ก์ง ๊ตฌํ)
import Component1 from './a.vue'
import Component2 from './b.vue'
import Component2 from './c.vue'
const components = {
Component1,
Component2,
Component3
}
export function install(Vue) {
if (install.installed) return
install.installed = true
Object.keys(components).forEach(name => {
Vue.component(name, components[name])
})
}
const plugin = {
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'
import vue from 'rollup-plugin-vue'
import buble from 'rollup-plugin-buble'
export default {
input: 'src/wrapper.js',
output: {
name: 'Vest',
exports: 'named'
},
plugins: [
commonjs(),
vue({
css: true,
compileTemplate: true
}),
buble()
]
}
Build
npm run build