前言
既然是rollup+vue组件模板，就不说明为什么采用这个模式来开发组件了。
需要了解rollup的看文档：rollup官方文档
rollup打包
找个文件夹，开干
mkdir vue-rollup-component-templatecd vue-rollup-component-templatenpm 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-esbuild/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-commonjsnpm 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转ES5export 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设置
设置 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 Mainsrc/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 installcss打包压缩
npm i -D rollup-plugin-css-only clean-cssbuild/rollup.config.base.js 增加
...import css from 'rollup-plugin-css-only' // 提取css，压缩能力不行import CleanCSS from 'clean-css' // 压缩cssimport { 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 docsnpm idocs/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-envpackage.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 publishgithubpages
新建 .gitignore 文件，添加 git 忽略文件
.DS_Storenode_modules/.vscode/npm-debug.logyarn-error.log然后上传到github，打开项目设置，github pages的surce项选择docs。
打开分配的地址就可以观光页面了。
项目 github 地址