【手牵手】搭建前端组件库（二）

3次阅读

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

进阶

组件库按需引入
在目前，所有的组件会被打包进一个文件，组件库是一骨碌加载完所有组件，同时也会打包和加载多余的代码。对于小项目这样没有问题，但是当组件库越来越庞大、丰富，特别是像我们带业务逻辑的非 js 库，代码量会更大，如果不管不顾的一通加载完所有资源，后期肯定会带来业务方面的体验问题。
所以首要的问题是实现源代码的按需引入，而按需引入的前提是实现源码包按独立组件分割和的拆分打包。
代码分拆
单个组件独立构建打包的思路就是给打包工具提供多个独立的入口，根据入口收集其所依赖的资源。一个组件入口产出一个文件
webpack
使用 webpack 配置多入口的方式来按模块拆分打包，每一个模块作为一个入口，与此同时产出对应的文件。
webpack 的配置比较简单，不展开.
实际构建 library 使用 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;
}
});
哪些额外的代码看着有点不那么清爽.
rollup
使用 rollup 来打包 library，rollup 相较于 webpack 在打包体积上会跟小，更加适合 .
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’);

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();
}

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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”;

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();
}

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))
}

修改 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 仓库有以下一些特性：

私有包托管在内部服务器或者单独的服务器上；
可以同步整个官方仓库，也可以只同步需要的；
下载的时候，可以让公共包走公共仓库，私有包走私有仓库；
可以缓存下载过的包；
对于下载，发布，有对应的权限管理。

私有 npm 的搭建有多种方式，最简单的使用 git 仓库作为私有仓库.
快速搭建和部署私有的 npm 包管理服务也可以使用 verdaccio
对权限、安全性、稳定性有更高要求的可以使用 cnpmjs.org, cnpmjs.org 服务的搭建需要配合数据库使用.
完！

正文完

rollup webpack 前端构建前端架构

发表至： javascript

2019-02-26

0

关于javascript:数字孪生智慧医院构建三维医疗管控系统

关于javascript:codemirror

HTTP contentType

js函数的副作用

Kotlin整合Vertx开发Web应用

【手牵手】搭建前端组件库（二）

站内搜索