【手牽手】搭建前端組件庫（二）

時間 2019-11-08

標籤手牽手搭建前端組件简体版

原文原文鏈接

進階

組件庫按需引入

在目前，全部的組件會被打包進一個文件，組件庫是一骨碌加載完全部組件，同時也會打包和加載多餘的代碼。對於小項目這樣沒有問題，可是當組件庫愈來愈龐大、豐富，特別是像咱們帶業務邏輯的非js庫，代碼量會更大，若是無論不顧的一通加載完全部資源，後期確定會帶來業務方面的體驗問題。javascript

因此首要的問題是實現源代碼的按需引入，而按需引入的前提是實現源碼包按獨立組件分割和的拆分打包。css

代碼分拆

單個組件獨立構建打包的思路就是給打包工具提供多個獨立的入口，根據入口收集其所依賴的資源。一個組件入口產出一個文件html

webpackvue

使用 webpack 配置多入口的方式來按模塊拆分打包，每個模塊做爲一個入口，與此同時產出對應的文件。java

webpack 的配置比較簡單，不展開.node

實際構建 library 使用 webpack 有不小的缺點，應爲 webpack 產出後的文件中帶有一層包裹代碼，這種狀況下在碎片化的組件庫中反而會使打包體積變大，沒法起到‘瘦身’的效果。以下的 webpack 包裹代碼：webpack

/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
  'use strict';
  /* unused harmony export square */
  /* harmony export (immutable) */ __webpack_exports__['a'] = cube;
  function square(x) {
    return x * x;
  }

  function cube(x) {
    return x * x * x;
  }
});

哪些額外的代碼看着有點不那麼清爽.git

rollupgithub

使用 rollup來打包 library，rollup相較於 webpack 在打包體積上會跟小，更加適合 .web

rollup 的特色：

Tree Shaking: 自動移除未使用的代碼, 輸出更小的文件
Scope Hoisting: 全部模塊構建在一個函數內, 執行效率更高
Config 文件支持經過 ESM 模塊格式書寫
能夠一次輸出多種格式:
- 模塊規範: IIFE, AMD, CJS, UMD, ESM
- Development 與 production 版本: .js, .min.js

是驢是馬拉出來溜溜~~

全局安裝 rollup

npm install --global rollup
// or
cnpm install --global rollup

rollup 的迭代比較快，這裏稍微留意一下 rollup 的版本，部分插件可能不兼容

添加rollup.config.js

在項目根目錄下建立 rollup.config.js 文件：

// rollup.config.js
export default {
  input: 'packages/index.js',
  output: {
    file: 'lib/app.all.js',
    format: 'cjs'
  }
};

input：構建入口
format：編譯打包格式
file：編譯後輸出目錄

就這麼簡單，執行如下命令開始將裝個 packages 構建構建爲一個單文件

rollup -c rollup.config.js

添加 rollup 多文件構建

Rollup 配置文件是一個標準 ES6 模塊，默認處處一個對象，也能夠處處一個對象用來構建多個模塊

// rollup.config.js
export default [{
  input: 'packages/a.js',
  output: {
    file: 'lib/app.a.js',
    format: 'cjs'
  }
}，{
  input: 'packages/b.js',
  output: {
    file: 'lib/app.b.js',
    format: 'cjs'
  }
}];

packages 目錄爲組件庫源碼，相關模塊不固定，不適宜寫死。對於這個問題經過掃描目錄獲取全部模塊，修改 rollup.config.js ：

// rollup.config.js
const fs = require('fs-extra');
const path = require('path');

const packages = {};
const dir = path.join(__dirname, '../packages');
const files = fs.readdirSync(dir);
files.forEach(file => {
    const absolutePath = path.join(dir, file);
    if (isDir(absolutePath)) {
        packages[file] =`packages/${file}/index.js`;
    }
});

function createRollupConfig (file, name) {
  const config = {
    input: file,
    output: {
        file: `lib/index.js` : `lib/${name}/index.js`,
        format: 'es',
        name: name,
        sourcemap: true
    }
  }
  return config
}

const buildPackages = []
for (let name in packages) {
  const file = packages[name]
  buildPackages.push(createRollupConfig(file, name))
}

export default buildPackages;

這裏打包文件的格式咱們使用 es，es是指ES6.這個時候開始構建會報錯，由於rollup還不能識別組件庫中的 vue 樣板代碼、語法，同時咱們的組件庫並非純粹的js library，也須要處理業務組件內引用的樣式和圖片、字體等。

僅僅是使用 rollup 還不能實現咱們的目的，須要藉助一系列 rollup 插件來完成

處理vue

.vue文件的編譯須要使用rollup-plugin-vue2插件：

npm rollup-plugin-vue2 --save-dev

處理樣式

樣式處理可使用 rollup-plugin-css-only插件。因爲不喜歡笨拙的css，習慣了scss語法，就直接使用 scss，但其配置就相對要複雜一點。

scss樣式處理可使用rollup-plugin-scss插件，爲了靈活的處理樣式我使用Postcss

圖片處理

html中引入的圖片在組件庫部署後就沒法正常訪問了，這裏使用 rollup-plugin-url

插件將內嵌的圖片編譯爲 base64 再直接放入 js 文件中。

對於組件庫中有較多大尺寸的圖片建議直接將圖片放入圖片服務器，而後經過url 引入，避免打包文件過大的問題.

加入 rollup 插件後的配置：

// rollup.config.js
const fs = require('fs-extra');
const path = require('path');

import vue from 'rollup-plugin-vue2'
import postcss from 'rollup-plugin-postcss'
import postcssScss from 'postcss-scss'
import autoprefixer from 'autoprefixer'
import base64 from 'postcss-base64'
import url from 'rollup-plugin-url'

import progress from 'rollup-plugin-progress'
import filesize from 'rollup-plugin-filesize';

function isDir(dir) {
  return fs.lstatSync(dir).isDirectory();
}

const packages = {};
const dir = path.join(__dirname, '../packages');
const files = fs.readdirSync(dir);
files.forEach(file => {
    const absolutePath = path.join(dir, file);
    if (isDir(absolutePath)) {
        packages[file] =`packages/${file}/index.js`;
    }
});

function createRollupConfig (file, name) {
  const config = {
    input: file,
    output: {
        file: `lib/${name}/index.js`,
        format: 'es',
        name: name,
        sourcemap: true
    },
    plugins: [
      vue(),
      postcss({
        extract: true,
        parser: postcssScss,
        plugins: [
          base64({
            extensions: ['.png', '.jpeg'],
            root: './packages/',
          }),
          autoprefixer({ add: true }),
        ]
      }),
      url({
              limit: 10 * 1024,
              //include: ['.svg']
          }),
      progress(),
      filesize()
    ]
  }
  return config
}

const buildPackages = []
for (let name in packages) {
  const file = packages[name]
  buildPackages.push(createRollupConfig(file, name))
}

export default buildPackages;

到此能夠運行 rollup -c rollup.config.js 打包，實現源代碼按依賴關係和目錄進行分拆打包：

lib
    ├─message
    │      index.js
    |      index.css
    |      index.js.map
    ├─pay
    │      index.js
    |      index.css
    |      index.js.map
    ├─share
    │      index.js
    |      index.css
    |      index.js.map

打包後的 packages/pay/index.js > lib/pay/index.js :

// lib/pay/index.js
var logo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd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";

var message = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"message"},[_c('el-row',{staticClass:"message-test"},[_c('el-col',{staticClass:"message-row",attrs:{"span":12}},[_c('p',{staticClass:"text"},[_vm._v("message "+_vm._s(_vm.message)+" -- "+_vm._s(_vm.count))])]),_vm._v(" "),_c('el-col',{attrs:{"span":6}},[_c('p',[_vm._v("\n        css backgroud image base64\n      ")]),_vm._v(" "),_c('div',{staticClass:"tops"}),_vm._v(" "),_c('hr'),_vm._v(" "),_c('p',[_vm._v("\n        html img 內嵌 image base64\n      ")]),_vm._v(" "),_c('img',{staticStyle:{"width":"100px"},attrs:{"src":_vm.imgUrl}})])],1)],1)},
staticRenderFns: [],
  name: 'x-message',
  props: {
    message: String,
  },
  data: function () {
    return {
      count: '2233hahaha',
      imgUrl: logo
    }
  },
  created: function () {
    console.log('logo:', this.imgUrl);
  }
};

message.install = function (Vue) {
  Vue.component(message.name, message);
};

export default message;
//# sourceMappingURL=index.js.map

構建整個組件庫

在支持按需引入的同時，若是還需支持完整引入整個組件庫。則直接在 rollup 配置里加入一個完整的組件庫入口

rollup.config.js 最終配置

// rollup.config.js
const fs = require('fs-extra');
const path = require('path');
const pkg = require("../package.json")

import vue from 'rollup-plugin-vue2'
import postcss from 'rollup-plugin-postcss'
import postcssScss from 'postcss-scss'
import autoprefixer from 'autoprefixer'
import base64 from 'postcss-base64'
import url from 'rollup-plugin-url'

import progress from 'rollup-plugin-progress'
import filesize from 'rollup-plugin-filesize';

function isDir(dir) {
  return fs.lstatSync(dir).isDirectory();
}

const packages = {};
const dir = path.join(__dirname, '../packages');
const files = fs.readdirSync(dir);
files.forEach(file => {
    const absolutePath = path.join(dir, file);
    if (isDir(absolutePath)) {
        packages[file] =`packages/${file}/index.js`;
    }
});
const allScript = `${pkg.name}.all`
packages[allScript] = `packages/index.js`;

function createRollupConfig (file, name) {
  const config = {
    input: file,
    output: {
        file: name === allScript ? `lib/index.js` : `lib/${name}/index.js`,
        format: 'es',
        name: name,
        sourcemap: true
    },
    plugins: [
      vue(),
      postcss({
        extract: true,
        parser: postcssScss,
        plugins: [
          base64({
            extensions: ['.png', '.jpeg'],
            root: './packages/',
          }),
          autoprefixer({ add: true }),
        ]
      }),
      url({
              limit: 10 * 1024,
              //include: ['.svg']
          }),
      progress(),
      filesize()
    ]
  }
  return config
}

const buildPackages = []
for (let name in packages) {
  const file = packages[name]
  buildPackages.push(createRollupConfig(file, name))
}

export default buildPackages;

產出的構建目錄：

lib
    ├─message
    │      index.js
    |      index.css
    |      index.js.map
    ├─pay
    │      index.js
    |      index.css
    |      index.js.map
    ├─share
    │      index.js
    |      index.css
    |      index.js.map
  index.js  //完整組件庫，包含全部組件
  index.css
  index.js.map

到這裏構建部分完成，下一步,將構建後的lib目錄發佈到 npm:

修改package.json version字段與上次不同（如： 0.1.2），不然會提交失敗
修改package.json main字段爲： lib/index.js
發佈：執行 npm publish

按需引入組件

組件庫發佈後，咱們轉入業務項目中npm 安裝組件庫，如：

npm i qw-ui

安裝完成後，在項目node_modules文件夾下能夠找到名爲_qw-ui@0.1.1@qw-ui，即咱們剛纔發佈的組件庫.

完整引入

當咱們想一次引入整個項目，而非單獨引入每次組件時：修改src/main.js,全局引入整個qw-ui，如：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import qwui from 'qw-ui'     // 全局引入整個組件庫
import 'qw-ui/lib/index.css' // 全局載入樣式

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(qwui)

new Vue({
  render: h => h(App),
}).$mount('#app')

按需引入

按需引入須要藉助 babel-plugin-import，咱們能夠只引入須要的組件，以達到減少項目體積的目的.

首先npm install babel-plugin-import --save-dev,而後再項目根目錄上新建文件.babelrc.

vue cli3 直接修改babel.config.js文件：

// babel.config.js
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [["import", {
    "libraryName": "qw-ui",
    "customName": (name) => {
        return `../lib/${name}/index`;
      },
    "style": (name) => {
        return `${name}.css`;
      }
  }]]
}

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import { message } from 'qw-ui'     // 按需引入 message 組件

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(message)

new Vue({
  render: h => h(App),
}).$mount('#app')

這時候已經啓用了 babel-plugin-import ，插件會幫咱們將import { message } from 'qw-ui'轉換成 import message from 'qw-ui/lib/message' 的寫法。同時自動注入組件樣式。

~ 運行一下項目~~

私有npm

業務性組件庫通常只適合於公司內部，組件或多或少的也涉及到代碼安全和商業風險，因此將打包後的組件庫發佈到私有npm而不是發佈到公網上的npm官網相對要安全不少.

私有 npm 倉庫可讓咱們使用組件就像 npm 官方倉庫裏的包同樣方便。

私有 npm 倉庫有如下一些特性：