前言
既然是rollup+vue組件模板,就不說明爲什麼採用這個模式來開發組件了。
需要了解rollup的看文檔:rollup官方文檔
rollup打包
找個文件夾,開幹
mkdir vue-rollup-component-template
cd vue-rollup-component-template
npm init
安裝 rollup
npm i -D rollup
配置文件 rollup.config.js
export default {
input: 'src/index.js',
output: {
name: 'vue-rollup-component-template',
file: 'dist/vue-rollup-component-template.js',
format: 'umd'
}
}
入口文件 src/index.js
const x = 1;
export default (y) => x + y
修改 package.json 命令
"scripts": {
"build": "rollup --config rollup.config.js"
}
打包
npm run build
完成了一個簡單的打包。
不同打包格式與命令
"scripts": {
"build": "npm run build:browser && npm run build:es && npm run build:umd",
"build:browser": "rollup --config build/rollup.config.browser.js",
"build:es": "rollup --config build/rollup.config.es.js",
"build:umd": "rollup --config build/rollup.config.umd.js"
},
通用配置 build/rollup.config.base.js
export default {
input: 'src/index.js', //入口
plugins: [] // 插件
}
- es – ES模塊文件。
安裝js壓縮插件
npm i -D rollup-plugin-uglify-es
build/rollup.config.es.js
import base from './rollup.config.base'
import uglify from 'rollup-plugin-uglify-es' //js壓縮
const config = Object.assign({}, base, {
output: {
exports: 'named',
name: 'vue-rollup-component-template',
file: 'dist/vue-rollup-component-template.min.js',
format: 'iife'
},
})
config.plugins.push(uglify())
export default config
- umd – 通用模塊定義,以amd,cjs 和 iife 爲一體。
build/rollup.config.browser.js
import base from './rollup.config.base'
const config = Object.assign({}, base, {
output: {
exports: 'named',
name: 'vue-rollup-component-template',
file: 'dist/vue-rollup-component-template.umd.js',
format: 'umd'
},
})
export default config
- iife – 一個自動執行的功能,適合作爲< script >標籤。
build/rollup.config.browser.js
import base from './rollup.config.base'
import uglify from 'rollup-plugin-uglify-es' //js壓縮
const config = Object.assign({}, base, {
output: {
exports: 'named',
name: 'VueRollupComponentTemplate',
file: 'dist/vue-rollup-component-template.min.js',
format: 'iife'
},
})
config.plugins.push(uglify())
export default config
打包
npm run build
安裝插件
組件開發少不了引入模塊、es6等,需要用 插件(plugins) 在打包的關鍵過程中更改 Rollup 的行爲。
npm i -D rollup-plugin-node-resolve rollup-plugin-commonjs
npm i -D rollup-plugin-vue vue vue-template-compiler
修改build/rollup.config.base.js
import resolve from 'rollup-plugin-node-resolve' // 告訴 Rollup 如何查找外部模塊
import commonjs from 'rollup-plugin-commonjs' // 將CommonJS模塊轉換爲 ES2015 供 Rollup 處理
import vue from 'rollup-plugin-vue' // 處理vue文件
import babel from 'rollup-plugin-babel' // rollup 的 babel 插件,ES6轉ES5
export default {
input: 'src/index.js',
plugins: [
resolve({ extensions: ['.vue'] }),
commonjs(),
vue(),
babel()
]
}
rollup-plugin-babel 插件需要 babel 支持
npm i -D babel-core babel-preset-env babel-preset-stage-3 [email protected]
新建 .babelrc
{
"presets": [
["env", { "modules": false }],
"stage-3"
],
}
組件開發與root設置
設置 root
npm i -D babel-plugin-module-resolver
.babelrc 增加 plugins
{
"plugins": [
[
"module-resolver",
{
"root": ["src/"]
}
]
]
}
從而src目錄下的模塊引入,不需要'../../',只要 (年齡小的、身材好的)
import VList from 'components/list'
import util from 'utils/util'
import mixins from 'mixins/mixin'
...
組件開發
src/components/list/main.vue
<template>
<div class="v-list">
<slot/>
<div class="v-list-date">
<div class="v-list-date-label">當前時間:</div>
<div class="v-list-date-text">{{date}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'VList',
data() {
return {
date: new Date()
}
}
}
</script>
src/components/list/index.js
import Main from './main';
export default Main
src/index.js
import VList from 'components/list';
const components = [VList]
const install = function (Vue) {
components.forEach(component => {
Vue.component(component.name, component)
})
}
// 自動註冊組件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default install
css打包壓縮
npm i -D rollup-plugin-css-only clean-css
build/rollup.config.base.js 增加
...
import css from 'rollup-plugin-css-only' // 提取css,壓縮能力不行
import CleanCSS from 'clean-css' // 壓縮css
import { writeFileSync } from 'fs' // 寫文件
export default {
input: 'src/index.js',
plugins: [
...
css({ output(style) {
// 壓縮 css 寫入 dist/vue-rollup-component-template.css
writeFileSync('dist/vue-rollup-component-template.css', new CleanCSS().minify(style).styles)
} }),
// css: false 將<style>塊轉換爲導入語句,rollup-plugin-css-only可以提取.vue文件中的樣式
vue({ css: false }),
...
]
}
rollup-plugin-css-only 支持 css及scss
src/components/list/main.vue
<style>
.v-list {
width: 300px;
margin: 0 auto;
}
</style>
<style lang="scss">
.v-list-date {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
.v-list-date-label{
font-size: 12px;
color: #999;
}
.v-list-date-text{
font-size: 12px;
color: #666;
}
}
</style>
<style scoped>
.v-list-1 {
background-color: #333;
}
</style>
看起來一切順利就可以打包發佈npm了。
可能發了一堆bug到npm...,還沒測試呢。
測試與docs
創建docs
其實就是 vue 的簡易模板
vue init webpack-simple docs
安裝依賴
cd docs
npm i
docs/src/main.js 引入、註冊組件及css
...
import VueRollupComponentTemplate from '../../'
import '../../dist/vue-rollup-component-template.css'
Vue.use(VueRollupComponent)
...
docs/src/app.vue 使用組件
<template>
<div id="app">
<h1>vue-rollup-component-template</h1>
<p>輕鬆進行組件開發、發佈、展示</p>
<v-list></v-list>
</div>
</template>
docs/index.html js引入路徑改爲相對路徑(加個點)
<script src="./dist/build.js"></script>
docs/.gitignore 把dist/忽略去掉,github展示頁面需要訪問dist/
...
dist/ 去掉這個
...
docs目錄下只用改這幾個地方就可以
準備測試
根目錄下
npm i -D cross-env
package.json 添加命令
"scripts": {
...
"dev": "cross-env NODE_ENV=development rollup --config build/rollup.config.es.js --watch"
},
package.json 修改/添加程序入口
...
"main": "dist/vue-rollup-component-template.umd.js",
"module": "dist/vue-rollup-component-template.esm.js",
"unpkg": "dist/vue-rollup-component-template.min.js",
...
開始測試
- 根目錄下
npm run dev
- docs目錄下
npm run dev
根目錄src下內容修改會重新打包到dist,docs目錄監聽到dist目錄變動會實時響應並刷新頁面。
測試過後沒問題就可以打包項目,登錄npm發佈組件了。
發佈npm與githubpages
組件與測試是獨立的。
- 根目錄下打包的組件可以直接發佈npm,不用考慮測試生產環境,從而專注組件開發。
- docs錄下,在提交github之前打包,然後整個項目上傳github。
發佈npm
新建 .npmignore 文件,添加 npm 忽略文件
docs/
.babelrc
登錄npm,然後發佈
npm publish
githubpages
新建 .gitignore 文件,添加 git 忽略文件
.DS_Store
node_modules/
.vscode/
npm-debug.log
yarn-error.log
然後上傳到github,打開項目設置,github pages的surce項選擇docs。
打開分配的地址就可以觀光頁面了。