从0搭建rollupvue组件模板轻松发布npmgithubpages

35次阅读

共计 5511 个字符，预计需要花费 14 分钟才能阅读完成。

前言

既然是 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 地址

正文完
rollup vue.js
发表至：无分类
2019-07-12
 0