最近更新模板
vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（使用篇） 2020-01-08
前言
既然是rollup+vue组件模板，就不说明为什么采用这个模式来开发组件了。
需要了解rollup的看文档：rollup官方文档
本文目标是搭建一个简单实用的rollup+vue组件开发模板。
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
完成了一个简单的打包。
不同打包格式与命令
image
"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
image
安装插件
组件开发少不了引入模块、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 rollup-plugin-babel@3.0.0
新建 .babelrc
{
"presets": [
["env", { "modules": false }],
"stage-3"
],
}
组件开发与root设置
image
设置 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>
image
看起来一切顺利就可以打包发布npm了。
可能发了一堆bug到npm...，还没测试呢。
测试与docs
创建docs
其实就是 vue 的简易模板
vue init webpack-simple docs
image
安装依赖
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。
image
image
打开分配的地址就可以观光页面了。
image
