一文带你搞定搭建自己的组件库Rollup
一文带你搞定搭建自己的组件库(rollup.js)
目前Vue和React都是采用rollup.js进行打包,我们在公司开发的时候也可以用rollup搭建一个自己的组件库放到你的项目中,简化项目的结构项目性能。
接下来我将带你使用rollup从0——1搭建一个在vue中使用的组件库
开发前准备
我的开发环境是
node -- 16.0.0
npm -- 7.10.0
//我的项目版本是
pinia -- ^2.1.7
vue -- ^3.3.11
//我的项目是基于viet的vue3加Ts可视化项目
//我将使用rollup搭建一个组件库抽取公共的组件到rollup中后期发布到npm仓库中以达到简化项目结构的目的
这篇文章详细的记录了我搭建的过程以及解决报错的过程
开始
1.1搭建创建组件库
本节你将实现一个简单的rollup打包文件过程 以及使用打包后的代码
-
在你的桌面上创建一个文件夹(我的文件夹名字是【Echarts-Screen-Libs】)
-
拖动你的文件夹到vscode中打开命令行输入npm init 一路回车初始化npm
-
修改你的package.json
//this is my package.json { "name": "echarts-screen-libs",//change "version": "1.0.0", "description": "datav components library",//change "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Joon",//change "license": "ISC" //这是开源协议(后期修改) } -
继续打开命令行安装rollup
我的版本是"rollup": "^4.9.6" -
在项目中创建src文件夹 在src下创建index.js 里面写上一下内容
console.log("你好 组件库!!") export default {} -
继续在你的项目中创建两个文件夹
rollup.config.prod.js 线上环境调用 rollup.config.dev.js 开发环境调用这里做个说明 我们在线上环境我们会进行压缩代码 而在开发环境不会去压缩代码
所以这里我们创建两个配置文件 在不同环境中我们调用不同的config去执行rollup
-
继续编写dev配置文件实现调用rollup打包
// rollup.config.dev.js const path = require("path") const inputPath = path.resolve(__dirname, "./src/index.js") const outputPath = path.resolve(__dirname, "./dist/screen.datav.js") module.exports = { input: inputPath, output: { file: outputPath, format: "umd"//最后解释 } } -
继续修改package.json
"scripts": { // -wc "dev": "rollup -wc rollup.config.dev.js" },通过 npm run dev去调用 rollup实现打包
rollup -wc rollup.config.dev.js是一个rollup命令行工具的参数。-w或--watch：启用监视模式，当代码发生变化时自动重新构建。-c或--config：指定配置文件的路径。rollup.config.dev.js：指定要使用的配置文件的文件名。
因此，该命令会使用名为
rollup.config.dev.js的配置文件，并在其基础上启用监视模式。这意味着如果配置文件或输入文件中的代码发生更改，则rollup将自动重新构建打包文件。 -
当你执行完 npm run dev 应该不会有报错 可以看一下dist文件夹下已经打包出来了文件
-
到这里你就完成了一个简单的打包
-
我们在项目中创建一个文件夹 叫example 在该文件夹下创建一个index.html测试一下我们的打包代码
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="../dist/screen.datav.js"> script> head> <body> <h1> this is test file h1> body> html>运行该文件我们可以看见该js脚本运行没有问题
-
这里我们解释一下在dev配置文件中 format: “umd” 是什么意思
format 的选项有什么呢：
-
umd
在上述的
rollup.config.dev.js配置文件中，format: "umd"用于指定rollup的输出格式。UMD（Universal Module Definition）是一种通用的模块系统，它兼容多个环境，包括浏览器、Node.js和AMD（异步模块定义）。通过将代码包装在UMD的模块定义中，可以在不同的环境中使用相同的代码。
将
format设置为"umd"会生成一个UMD模块，它可以在浏览器和Node.js环境中都可以使用。UMD模块既可以通过//index.js import test from './Test.vue' export default function (vue) { vue.component(test.name, test) }执行打包
[!] RollupError: Expression expected (Note that you need plugins to import files that are not JavaScript)报错了为啥 你没装插件
继续安装以及调用函数
npm i -D rollup-plugin-vue
const vue = require(“rollup-plugin-vue”)
vue()
注意：你的vue函数必须放在plugins中的第一位 所有的函数靠后vue先调用
别忘了两个环境dev和prod都要加
继续打包—还是报错
[!] RollupError: Identifier cannot follow number (Note that you need plugins to import files that are not JavaScript) src/Test.vue?vue&type=style&index=0&id=07bdddea&scoped=true&lang.scss (2:12) 1: 2: h1 { ^ 3: color: red; 4: }因为你的scss没有解析插件
老套路
npm i rollup-plugin-postcss
const postcss = require(“rollup-plugin-postcss”)
postcss()
再次打包—还是报错
[!] (plugin postcss) Error: You need to install one of the following packages: "sass", "node-sass" in order to process SASS fileswhy – 去安装sass或者node -sass
npm i -D scss
好的我帮你们踩坑了这里即使你安装了scss还是没用
继续安装就可以打包了(真不容易)
npm install -D sass-loader@^10 sass到此为止 我们实现了vue的解析
还有一个报错
(!) Missing global variable name
我们在output中添加一个
global 就行
output: [ { file: outputPathUmd, format: "umd", name: "screenDatav", globals: { vue: "vue" } }, { file: outputPathejs, format: "es", name: "screenDatav", globals: { vue: "vue" } }, ],2.1测试组件库
改动你的index.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="https://unpkg.com/[email protected]/dist/vue.global.js">script> <script src="../dist/screen.datav.js">script> head> <body> <div id="app"> {{message}} <test-component>test-component> div> <script> Vue.createApp({ setup() { var message = "wanfeng" return { message } } }).use(screenDatav).mount("#app") <!-- 尤其注意这里 你需要use 模块的名称 其实就是你的配置问文件的name screenDatav --> <!--这个name其实就会变成一个全局的对象所以你需要挂载他--> script> body> html>然后还有一个问题 找到你打包的
screen.datav.js 找到这个一行
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.screenDatav = factory(global.vue)); //注意看global.vue 他是小写的 我们使用的是大写的Vue创建的app 所以你需要手动修改一下 global.Vue这里有的同学就觉得不太行老子每次执行一下打包都要改多烦
其实不用担心我们后期使用模块化开发他不会执行到这里
他会判断
exports是否存在
function是否存在 不会走到这里
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) : typeof define === 'function' && define.amd ? define(['vue'], factory) :2.2嵌入vue项目中
做这一步你需要有个vue3项目自己去创建
连接之前我们需要修改package.json中的 “main”: “./dist/screen.datav.js”,
这个main是默认引入指向的文件 我们指向我们打包后的js 上线后我们把他指向.min.js
然后我们在package.json中添加
file属性 改属性是指我们在推到npm仓库会包含那些文件
"files": [ "dist", "src" ],最后执行 npm link
不知道我的笔记本愁什么风 执行后没有输出 我就只能苦苦找link包
我的地址是
C:\Users\Joon\AppData\Roaming\npm\node_modules\echarts-screen-libs最后的echarts-screen-libs是你的package.json中的name名字
按照这个地址你去找指定能找到，当然希望你有输出
然后去你的vue3项目中 的package.json手动添加一个依赖后期你发布了组件库就好多了
"dependencies": { "pinia": "^2.1.7", "vue": "^3.3.11", "echarts-screen-libs":"1.0.0" },然后打开你vue3项目的命令行执行
npm link echarts-screen-libs
最后去你的node_modules中查看一下有没有加入
然后在main.ts中添加使用
import { createApp } from 'vue' import './style.css' import App from './App.vue' // 引入pinia并实例化 import { createPinia } from 'pinia' import datav from 'echarts-screen-libs'//add const pinia = createPinia() createApp(App).use(datav).use(pinia).mount('#app')//add可能你的项目还是会报错 因为你的lib没有安装eslint我这里没有使用eslint所以我不用报错
你去添加一下就行了
最后我建议你不要用vite
我打包组件的时候 测试了一下环境
webpack + ts +vue 通过
webpack + js +vue 通过
vite +ts +vue 报错
vite +js +vue 报错
https://juejin.cn/post/6984896065791229989https://github.com/vuejs/vue-cli/issues/7423],
最后执行 npm link 不知道我的笔记本愁什么风 执行后没有输出 我就只能苦苦找link包 我的地址是C:\Users\Joon\AppData\Roaming\npm\node_modules\echarts-screen-libs
最后的echarts-screen-libs是你的package.json中的name名字 按照这个地址你去找指定能找到，当然希望你有输出 然后去你的vue3项目中 的package.json手动添加一个依赖后期你发布了组件库就好多了“dependencies”: {
“pinia”: “^2.1.7”,
“vue”: “^3.3.11”,
“echarts-screen-libs”:“1.0.0”
},然后打开你vue3项目的命令行执行 npm link echarts-screen-libs 最后去你的node_modules中查看一下有没有加入 [外链图片转存中...(img-XqOPxC83-1707312769836)] 然后在main.ts中添加使用 ```ts import { createApp } from 'vue' import './style.css' import App from './App.vue' // 引入pinia并实例化 import { createPinia } from 'pinia' import datav from 'echarts-screen-libs'//add const pinia = createPinia() createApp(App).use(datav).use(pinia).mount('#app')//add可能你的项目还是会报错 因为你的lib没有安装eslint我这里没有使用eslint所以我不用报错
你去添加一下就行了
最后我建议你不要用vite
我打包组件的时候 测试了一下环境
webpack + ts +vue 通过
webpack + js +vue 通过
vite +ts +vue 报错
vite +js +vue 报错
https://juejin.cn/post/6984896065791229989https://github.com/vuejs/vue-cli/issues/7423这里我看了两篇文章还是没解决 各位大佬们自己看看吧
-