从0搭建rollup+vue组件模板，轻松发布npm、githubpages

最近更新模板

vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（使用篇）2020-01-08

前言

既然是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 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 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。

打开分配的地址就可以观光页面了。

项目 github 地址

master分支是webpack3+babek6版本，如果需要webpck4+babel7版本请在 clone项目后切换 webpck4-babel7 分支