從0搭建rollup+vue組件模板，輕鬆發佈npm、githubpages

前言

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