用rollup打包vue组件库
前言
网上关于使用 rollup 打包 vue 组件的资料寥寥可数,故记录下 rollup 打包的踩坑之路,最终打包成类似 elementUI 的组件库。
多仓库管理组件成本实属太大,于是想做成npm包依赖减少维护成本,选用的是rollup工具打包。但如果有图片不建议用rollup打包,因为要装的各种插件实在太多了,也不支持 require 语法(装了 require 之类的库也不能正确引入),未知的坑略多,更适合打包纯代码文件…
附上 rollup 官方文档,vue 官网也有教程可供参考
rollup 插件
先介绍后面会用到的一些 rollup 插件:
- rollup-plugin-node-resolve — rollup 无法识别
node_modules
中的包,帮助 rollup 查找外部模块,然后导入 - rollup-plugin-commonjs — 将 CommonJS 模块转换为 ES6 供 rollup 处理
- rollup-plugin-babel — ES6 转 ES5,让我们可以使用 ES6 新特性来编写代码
- rollup-plugin-terser — 压缩 js 代码,包括 ES6 代码压缩
- rollup-plugin-eslint — js代码检测
- rollup-plugin-require-context — 使用 require.context 语法
安装
npm install --global rollup
rollup 配置
初始化
在 lerna init(yarn init -y)
初始化包依赖后安装 rollup 相关依赖,有些 rollup 插件需安装新版本的(如 babel
,commonjs
等),则应该安装 @rollup/
命名开头的插件。
yarn add @babel/core rollup rollup-plugin-node-resolve rollup-plugin-terser @rollup/plugin-babel @rollup/plugin-commonjs
如果打包文件包含 vue
,scss
,image
这些类型的文件,则还需要安装 rollup 相关的插件,否则 rollup 无法识别这些文件类型或者是其语法。
yarn add @rollup/plugin-image rollup-plugin-scss rollup-plugin-vue @vue/compiler-sfc
用到 sass 还需要安装 sass
,sass-loader
,node-sass
插件
然后新建一个 rollup.config.js
文件,把之前安装的 rollup 插件引入,基础配置如下:
// rollup.config.js
import resolve from "rollup-plugin-node-resolve"
import vue from "rollup-plugin-vue"
import babel from "@rollup/plugin-babel"
import commonjs from "@rollup/plugin-commonjs"
import image from "@rollup/plugin-image"const config = {input: "./index.js", // 必须,入口文件output: { // 必须,输出文件 (如果要输出多个,可以是一个数组)exports: "named", // 输出多个文件globals: {vue: "Vue" // 告诉rollup全局变量Vue即是vue}},plugins: [ // 引入的插件在这里配置resolve(),vue({css: true,compileTemplate: true}),babel({exclude: "**/node_modules/**"}),commonjs(),image()]
}export default config
external配置
我们在自己的库中需要使用第三方库,例如 lodash 等,又不想在最终生成的打包文件中出现 lodash,这个时候我们就需要使用 external 属性。可根据实际情况自行选择。
external:['lodash'] //告诉rollup不要将此lodash打包,而作为外部依赖
external 可跟 globals 配套使用,如 react-redux
开源项目的 rollup 配置文件片段
input: 'src/index.js',external: ['react', 'redux'], // 告诉rollup,不打包react,redux;将其视为外部依赖output: { format: 'umd', // 输出 UMD格式,各种模块规范通用name: 'ReactRedux', // 打包后的全局变量,如浏览器端 window.ReactRedux globals: {react: 'React', // 跟external 配套使用,指明global.React即是外部依赖reactredux: 'Redux'}},
jsx 配置
如果 vue 中有用到 jsx 语法,则还需增加插件,否则会无法识别 jsx 语法
yarn add @vue/babel-preset-jsx
开始在 .babelrc
折腾了好久,发现均无效,最后发现需要在 rollup.config.js
中配置 babel 预设。
babel({presets: ["@vue/babel-preset-jsx"]})
入口文件配置
配置了 rollup.config.js 文件后,还需配置入口文件 index.js
,这里以多组件为例,单组件 vue 官网有示例,多组件则是参照 element-ui
框架的写法。
每个组件都要单独用一个文件夹,放在 src
里(谁让我是洁癖呐)。文件夹里一个你自己写的组件,一个 index.js
,这个 js 是用于向外暴露的。然后在 src
目录下新建 index.js
用于汇总全部组件。目录如下:
├── src
| ├── icon-font
| | ├── icon-font.vue
| | ├── index.js
├── index.js
然后在组件文件夹的 index.js
文件中如下配置:
import IconFont from "./icon-font.vue"IconFont.install = function(Vue) {Vue.component(IconFont.name, IconFont)
}export default IconFont
最后在汇总全部组件的 index.js
文件中如下配置:
// Import vue component
import IconButton from "./icon-button/index"
import IconFont from "./icon-font/index"
import IconTooltip from "./icon-tooltip/index"
import LayoutHeader from "./layout-header/index"
import LayoutSidebar from "./layout-sidebar/index"
import PageIntroduce from "./page-introduce/index"
import TextHiddenTooltip from "./text-hidden-tooltip/index"
import VTable from "./v-table/index"const components = [IconButton,IconFont,IconTooltip,LayoutHeader,LayoutSidebar,PageIntroduce,TextHiddenTooltip,VTable
]// will install the plugin only once
const install = function(Vue) {components.forEach(component => {Vue.component(component.name, component)})
}if (typeof window !== "undefined" && window.Vue) {install(window.Vue)
}// To allow use as module (npm/webpack/etc.) export component
export default { install, IconFont, TextHiddenTooltip }// It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = component;
可使用rollup-plugin-require-context插件的 require.context 语法改良,有需要参照使用方法的可移步至文末的 Q&A 模块
打包命令配置
最后还需要在 package.json
文件中配置打包命令,配置后直接在命令窗口中执行 yarn build
命令就可以打包了。
"scripts": {"build": "npm run build:umd & npm run build:es & npm run build:unpkg","build:umd": "rollup -c --format umd --file dist/components.umd.js","build:es": "rollup -c --format es --file dist/components.esm.js","build:unpkg": "rollup -c --format iife --file dist/components.min.js"}
在开发组件过程中,手动打包文件再联调很浪费时间,可以在 package.json
文件中增加监听文件变动自动打包的配置,同理,配置后直接执行 yarn dev
命令即可监听。
"scripts": {"dev": "npm run dev:umd & npm run dev:es & npm run dev:unpkg","dev:umd": "rollup -c -w --format umd --file dist/components.umd.js","dev:es": "rollup -c -w --format es --file dist/components.esm.js","dev:unpkg": "rollup -c -w --format iife --file dist/components.min.js"}
发布
最后就可以到 npm 网站发布了~~附上 github 例子
项目中引入组件
发布好 npm 包后,可以在项目中全局引入或局部引入组件,这里以我封装的组件库为例。
全局引入
在项目中的 main.js 中引入即可,引入组件和全局样式:
import Components from "@monorepo/components"
import "@monorepo/assets/src/scss/global.scss"
import "@monorepo/assets/src/scss/element-var.scss"
Vue.use(Components)
局部引入
在任意 vue 文件中引入:
import Components from "@monorepo/components"
Q & A
关于小伙伴的提问,统一在这里回复:
Q:关于多人提到的 vue 中的 jsx 不构建的问题,应该是指 npm run build
的时候构建报错?(不知有没理解错大家的问题)
A:个人重新拉取了仓库代码,有 yarn.lock
文件,直接执行 yarn
安装依赖后,执行 npm run build
是可以打包成功的,顺便提供 node 和 rollup 的版本供大家参考:
Q:组件库是基于 elementUI 封装的,不需要引入 elementUI 吗?
A:npm 包是不需要引入的,因为项目中会全局安装并引入 elementUI,所以这里不需要重复引入,但是需要在封装库中的 package.json 文件中写上 elementUI 这个依赖:
"devDependencies": {"@femessage/element-ui": "^2.17.0"}
Q:使用 require.context 优化主入口的引入方法
A:在 index.js 中代码思路大致如下:
const requireCxt = require.context("./src", true, /.vue/)
const components = {}requireCxt.keys().map((item, index) => {const component = requireCxt(item)return (components[component.default.name] = component.default)
}, {})
用rollup打包vue组件库相关推荐
- 如何使用rollup打包前端组件/库
如何使用rollup打包前端组件/库 目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发 ...
- 使用lib库模式打包vue组件及组件引用
1.lib库模式打包vue组件 语法: vue-cli-service build --target lib --name libName [entry] 示例: 当使用一个 .js 或 .ts 文件 ...
- vue 组件库发布_如何创建和发布Vue组件库
vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...
- Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
- 浅尝 | 从 0 到 1 Vue 组件库封装
写在前面 对于目前框架为王的时代,前端可能很大一部分时间,都是在开发相关的页面组件,而有句话说得好,没有哪个前端不想拥有一个属于自己的,为自己量身定制的组件库,那么本文就为大家整理一下: 如何从 0 ...
- 最好的Vue组件库之Vuetify的入坑指南(持续更新中)
目录 安装Vuetify 文档结构 快速入门 特性 样式和动画 首先先声明,个人不是什么很牛逼的大佬,只是想向那些想入坑Vuetify的前端新手或者嫌文档太长不知如何入手的人提供一些浅显的建议而已,能 ...
- vue组件库介绍以及组件库Element UI 的使用
组件库 前言 这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库 在实际开发中,前端 ...
- 如何从0开始搭建Vue组件库
前言: 组件设计是通过对功能及视觉表达中元素的拆解.归纳.重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库.本文我们主要讲述基于 Va ...
- 使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
- 京东Vue组件库NutUI 2.0发布:将支持跨平台!
NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...
最新文章
- 硅谷产品实战-总结:23、增长的核心在于减少用户阻力
- C# SQLite数据库 访问封装类
- 谷歌浏览器正式版90_谷歌浏览器 Google Chrome v79.0.3945.88 正式版
- 挖洞技巧:任意账号密码重置
- 使用ToolRunner运行Hadoop程序基本原理分析
- JavaScript或jQuery中使用键盘控制对象运动
- 一个Camel Multicast组件聚合策略问题的解决过程
- Mysql数据表的操作
- 软考(一):迎战软考
- 立下2019年的Flag,鞭策自己,使命宣言
- Android性能优化(第一章)
- 【Unity3D开发小游戏】《愤怒的小鸟》Unity开发教程
- Java实现AVL树
- 分享台阶价格对比逻辑。(商城中购买数量越多,单价越低)
- 计算机其他图标删除,我的电脑其他图标删除方法介绍
- Python必会的单元测试框架 —— unittest
- 微信投屏服务器出错,微信发布7.0.21版本,修复异常问题,增加超实用新功能
- 综合评价与决策方法01——理想解法
- python 绘制函数曲线图
- 牌型种数 ----蓝桥杯(暴力方法)