最近更新模板
vue-cli3攜手rollup卫键、github-actions打造自動(dòng)部署的vue組件模板（使用篇） 2020-01-08
前言
既然是rollup+vue組件模板，就不說(shuō)明為什么采用這個(gè)模式來(lái)開(kāi)發(fā)組件了虱朵。
需要了解rollup的看文檔：rollup官方文檔
本文目標(biāo)是搭建一個(gè)簡(jiǎn)單實(shí)用的rollup+vue組件開(kāi)發(fā)模板莉炉。
rollup打包
找個(gè)文件夾，開(kāi)干
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
完成了一個(gè)簡(jiǎn)單的打包碴犬。
不同打包格式與命令
"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 – 一個(gè)自動(dòng)執(zhí)行的功能，適合作為< script >標(biāo)簽偿荷。
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
安裝插件
組件開(kāi)發(fā)少不了引入模塊窘游、es6等，需要用 插件(plugins) 在打包的關(guān)鍵過(guò)程中更改 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模塊轉(zhuǎn)換為 ES2015 供 Rollup 處理
import vue from 'rollup-plugin-vue' // 處理vue文件
import babel from 'rollup-plugin-babel' // rollup 的 babel 插件忍饰，ES6轉(zhuǎn)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 rollup-plugin-babel@3.0.0
新建 .babelrc
{
"presets": [
["env", { "modules": false }],
"stage-3"
],
}
組件開(kāi)發(fā)與root設(shè)置
設(shè)置 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'
...
組件開(kāi)發(fā)
src/components/list/main.vue
<template>
<div class="v-list">
<slot/>
<div class="v-list-date">
<div class="v-list-date-label">當(dāng)前時(shí)間：</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)
})
}
// 自動(dòng)注冊(cè)組件
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' // 寫(xiě)文件
export default {
input: 'src/index.js',
plugins: [
...
css({ output(style) {
// 壓縮 css 寫(xiě)入 dist/vue-rollup-component-template.css
writeFileSync('dist/vue-rollup-component-template.css', new CleanCSS().minify(style).styles)
} }),
// css: false 將<style>塊轉(zhuǎn)換為導(dǎo)入語(yǔ)句，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>
看起來(lái)一切順利就可以打包發(fā)布npm了赢织。
可能發(fā)了一堆bug到npm...亮靴，還沒(méi)測(cè)試呢。
測(cè)試與docs
創(chuàng)建docs
其實(shí)就是 vue 的簡(jiǎn)易模板
vue init webpack-simple docs
安裝依賴(lài)
cd docs
npm i
docs/src/main.js 引入于置、注冊(cè)組件及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>輕松進(jìn)行組件開(kāi)發(fā)茧吊、發(fā)布、展示</p>
<v-list></v-list>
</div>
</template>
docs/index.html js引入路徑改為相對(duì)路徑（加個(gè)點(diǎn)）
<script src="./dist/build.js"></script>
docs/.gitignore 把dist/忽略去掉俱两，github展示頁(yè)面需要訪問(wèn)dist/
...
dist/ 去掉這個(gè)
...
docs目錄下只用改這幾個(gè)地方就可以
準(zhǔn)備測(cè)試
根目錄下
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",
...
開(kāi)始測(cè)試
- 根目錄下
npm run dev
- docs目錄下
npm run dev
根目錄src下內(nèi)容修改會(huì)重新打包到dist饱狂，docs目錄監(jiān)聽(tīng)到dist目錄變動(dòng)會(huì)實(shí)時(shí)響應(yīng)并刷新頁(yè)面曹步。
測(cè)試過(guò)后沒(méi)問(wèn)題就可以打包項(xiàng)目宪彩，登錄npm發(fā)布組件了。
發(fā)布npm與githubpages
組件與測(cè)試是獨(dú)立的讲婚。
- 根目錄下打包的組件可以直接發(fā)布npm尿孔，不用考慮測(cè)試生產(chǎn)環(huán)境，從而專(zhuān)注組件開(kāi)發(fā)筹麸。
- docs錄下活合，在提交github之前打包，然后整個(gè)項(xiàng)目上傳github物赶。
發(fā)布npm
新建 .npmignore 文件白指，添加 npm 忽略文件
docs/
.babelrc
登錄npm，然后發(fā)布
npm publish
githubpages
新建 .gitignore 文件酵紫，添加 git 忽略文件
.DS_Store
node_modules/
.vscode/
npm-debug.log
yarn-error.log
然后上傳到github告嘲，打開(kāi)項(xiàng)目設(shè)置，github pages的surce項(xiàng)選擇docs奖地。
打開(kāi)分配的地址就可以觀光頁(yè)面了橄唬。
