实现 rollup 实现多模块打包

rollup 是一个 JavaScript 模块打包器,可以将许多 JavaScript 库和应用程序打包成少量的捆绑包,从而提高了应用程序的性能。本文详细描述如何通过 rollup 实现多模块打包。

前提

项目的目录结构
在这里插入图片描述

先看下项目的 package.json 文件夹:

{"private": true,"workspaces": ["packages/"],"type": "module"
}

workspaces

这里我们使用 workspaces 字段定义 npm 工作空间。它可以让你在同一项目中使用多个独立的 npm 包,这些包可以共享相同的依赖项和环境,使得管理依赖关系变得更加方便。

同时你可以指定一个或多个目录,它们将包含在工作空间中。例子中,将 packages/ 目录包含在工作空间中,意味着在该目录下的所有子目录都将被视为 npm 包,并共享相同的依赖项和环境。

使用工作空间可以大大简化具有多个独立模块或应用的项目的依赖关系管理。你可以在每个模块或应用中独立运行 npm 命令,而无需担心它们之间的依赖关系和环境影响。

需要注意的是,使用工作空间需要你的项目目录结构符合一定的规范,例如每个模块或应用都需要位于 packages/ 目录的子目录中。此外,使用工作空间需要在命令行中运行 npm 命令时,需要使用 “–workspace” 标志来指定要操作的工作空间,例如 npm install rollup -W

同时 “workspaces” 只能在私有项目中使用。这里需要配置 private: true

包使用

通过目录结构可以看到在 packages 里面是有多个 npm 包的那么如何在去引用这些文件呢,例如在 reactivity 里面通过 import xxx from '@vue/shared' 去引用 shared 文件下的某个功能呢?我们经行如下修改:

// tsconfig.json
{"baseUrl": "./","module": "ESNext","moduleResolution": "node",// 省略部分代码"paths": {"@vue/*": ["packages/*/src"]}
}

在 shared 文件夹中补充如下测试代码:

// packages/shared/src/index.ts
export const isArray = Array.isArray

在 reactivity 文件夹下直接引入就行了:

// packages/reactivity/src/index.ts
import { isArray } from '@vue/shared'
console.log(isArray)

打包

既然每个文件都有属于一个独立 npm 模块,也会有一个属于自己的 package.jsonreactivity 为例:

package.json

{"name": "@vue/reactivity","version": "1.0.0","main": "index.js","license": "MIT","buildOptions": {"name": "VueReactivity","formats": ["esm-bundler","cjs","global"]}
}

package.json 里面定义了包的名称以及对应的打包方式,分别是 esmcjsglobal 不同标准的打包方式。

execa

packages/ 目录包含了多个 npm 包那么如何对每个文件经行打包呢,这里我们可以使用 execa

import { readdirSync, statSync } from 'fs'
import { execa } from 'execa'// 1、获取打包目录
const dirs = readdirSync('packages').filter(dir => statSync(`packages/${dir}`).isDirectory()) // [ 'reactivity', 'shared' ]async function build(TARGET) {await execa('rollup', ['-c', '--environment', `TARGET:${TARGET}`], { stdio: 'inherit' })
}function runParaller(dirs) {let result = []for (const dir of dirs) {result.push(build(dir))}return Promise.all(result) // 存放打包的promise
}
// 2、进行打包
runParaller(dirs).then(() => {console.log('success')
})

rollup.config.js

上面代码通过 execa 去执行 rollup 的打包逻辑,这里的 −c 参数表示使用配置文件(默认是 rollup.config.js),−−environment 参数用于指定环境变量, stdio: 'inherit' 表示将命令的标准输入、输出和错误流重定向到父进程的流(即 Node.js 进程的流)。

import { defineConfig } from 'rollup'
import { createRequire } from 'node:module'
import ts from 'rollup-plugin-typescript2'
import json from '@rollup/plugin-json'
import resolvePlugin from '@rollup/plugin-node-resolve' // 解析第三方插件
import path from 'node:path'
import { fileURLToPath } from 'node:url'const require = createRequire(import.meta.url)
const __dirname = path.dirname(fileURLToPath(import.meta.url))// 2.获取文件路径
const packagesDir = path.resolve(__dirname, 'packages')// 2.1 获取需要打包的文件
const packageDir = path.resolve(packagesDir, process.env.TARGET)
const resolve = p => path.resolve(packageDir, p)
// 2.2 获取每个包的配置项
const pkg = require(resolve('package.json')) // 获取 jsonconst name = path.basename(packageDir) // reactivity
// 3、创建一个映射表
const outputConfigs = {'esm-bundler': {file: resolve(`dist/${name}.esm-bundler.js`),format: 'esm'},'cjs': {file: resolve(`dist/${name}.cjs.js`),format: 'cjs'},'global': {file: resolve(`dist/${name}.global.js`),format: 'iife'}
}const packageOptions = pkg.buildOptions || {}// 1、创建一个打包配置
function createConfig(format, output) {output.name = packageOptions.nameoutput.sourcemap = false// 生成rollup配置const config = {input: resolve('src/index.ts'), // 输入output, // 输出plugins: [json(),ts({tsconfig: path.resolve(__dirname, 'tsconfig.json')}),resolvePlugin()]}return config
}const packageFormats = packageOptions.formatsconst packageConfigs = packageFormats.map(format => createConfig(format, outputConfigs[format]))
export default defineConfig(packageConfigs)

测试

example 在新建一个测试文件:

<script src="../packages/shared/dist/shared.global.js"></script>
<script>let { isArray } = VueShared;console.log(isArray([])); // true
</script>

总结

以上大体实现了通过 rollup 实现多模块打包的功能

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17716.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的 365 天创作纪念日

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

【Unity造轮子】实现一个类csgo的武器轮盘功能

文章目录 前言素材导入开始1.放背景和中间的圆圈&#xff0c;调整合适的宽高和位置2.添加选择图像框3.添加一些武器道具选择4.书写脚本RadialMenuManager5.绑定脚本和对象6.运行效果&#xff0c;按tab键开启关闭轮盘7.优化添加显示选中的武器文本8.添加鼠标选中放大的效果9.添加…

MySQL和Oracle区别

由于SQL Server不常用&#xff0c;所以这里只针对MySQL数据库和Oracle数据库的区别 (1) 对事务的提交 MySQL默认是自动提交&#xff0c;而Oracle默认不自动提交&#xff0c;需要用户手动提交&#xff0c;需要在写commit;指令或者点击commit按钮 (2) 分页查询 MySQL是直接在SQL…

JIT 与 C#热更

JIT与AOT 一般程序运行有两种方式&#xff0c;静态编译与动态编译。 AOT: Ahead Of Time,预先&#xff08;静态&#xff09;编译 静态编译的程序&#xff0c;需要在执行之前全部翻译为机器码&#xff0c;运行前会使得程序安装时间相对较长&#xff0c;但程序运行的时候&#…

加载已训练好的目标检测YOLOv8,v5,v3,v6模型,对数据集中某张图片中的object打上方框、标出类别,并将图片保存到本地

参考的教程&#xff1a;Python - Ultralytics YOLOv8 Docs 在与ultralytics代码同一层级下新建 predict.py 里面写下面的内容。运行即可 from ultralytics import YOLO from PIL import Image import cv2# 加载计划使用的模型 model YOLO("yolov8n.pt") # load a…

2023年的深度学习入门指南(24) - 处理音频的大模型 OpenAI Whisper

2023年的深度学习入门指南(24) - 处理音频的大模型 OpenAI Whisper 在这一讲之前&#xff0c;我们所用的大模型都是针对文本的。这一讲我们增加一个新的领域&#xff0c;即音频。我们将介绍OpenAI的Whisper模型&#xff0c;它是一个处理音频的大模型。 Whisper模型的用法 Wh…

Qt信号与槽机制的本质

引入 对象与对象之间的通信有多个方式&#xff0c;如果我们要提供一种对象之间的通信机制。这种机制&#xff0c;要能够给两个不同对象中的函数建立映射关系&#xff0c;前者被调用时后者也能被自动调用。 再深入一些&#xff0c;两个对象如果都互相不知道对方的存在&#xff…

leetcode每日一练-第102题-二叉树的层序遍历

一、思路 BFS 二、解题方法 通过广度优先搜索&#xff08;BFS&#xff09;的方式&#xff0c;按层遍历二叉树节点&#xff0c;并将每层的节点值保存在一个一维数组中&#xff0c;然后再将所有的一维数组存储在二维数组中&#xff0c;最后返回二维数组作为层序遍历的结果。 …

三菱plcCCLINK转profinet与西门子PLC通讯案例分析

用三菱PLC的控制系统需要和西门子的PLC控制系统交互数据&#xff0c;捷米JM-PN-CCLK 是自主研发的一款 PROFINET 从站功能的通讯网关。该产品主要功能是将各种 CCLINK 总线和 PROFINET 网络连接起来。 捷米JM-PN-CCLK总线中做为从站使用&#xff0c;连接到 CCLINK 总线中做为…

地产变革中,物业等风来

2023年7月&#xff0c;也许是中国房地产行业变局中的一个大拐点。 中信建投研报表示&#xff0c;政治局会议指出当前我国房地产形势已发生重大变化&#xff0c;要适时调整优化政策&#xff0c;为行业形势定调……当前房地产行业β已至。 不久前&#xff0c;国家统计局公布了2…

洞悉安全现状,建设网络安全防护新体系

一、“网络攻防演练行动“介绍 国家在2016年发布《网络安全法》&#xff0c;出台网络安全攻防演练相关规定&#xff1a;关键信息基础设施的运营者应“制定网络安全事件应急预案&#xff0c;并定期进行演练”。同年“实战化网络攻防演练行动”成为惯例。由公安部牵头&#xff0…

Monorepo

❌现有的架构可能会遇到什么问题 分散的git仓库 随着时间的沉淀&#xff0c;项目数量在飞速增长&#xff0c;增加了项目的工程管理难度 怎么区分来源呢&#xff1f; 通过git目录划分通过项目命名 新员工入职的时候需要&#xff0c;需要下载代码并安装所需的依赖。在这种情…

计算机毕设 深度学习实现行人重识别 - python opencv yolo Reid

文章目录 0 前言1 课题背景2 效果展示3 行人检测4 行人重识别5 其他工具6 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要求&#xff0c;这两年不断有学弟学妹告诉…

【技术讨论】RF环境搭建手册

简要整理下环境搭建的步骤&#xff0c;以便快速、准确的搭建测试环境。 一、环境搭建 一、Python 2.7 1、 不要用Python3.6&#xff0c;很多库3.6中还没有&#xff0c;wxPython官方只支持Python 2。 2、 环境变量配置后需要重启才能生效。 3、 环境变量添加C:\Python27\Sc…

一文详解:自动化测试工具——Selenium

前言 Selenium是一个用于Web应用程序测试的工具。是一个开源的Web的自动化测试工具&#xff0c;最初是为网站自动化测试而开发的&#xff0c;类型像我们玩游戏用的按键精灵&#xff0c;可以按指定的命令自动操作&#xff0c;不同是Selenium可以直接运行在浏览器上&#xff0c;…

明明已经安装字体,但IDEA、CLION无法找到思源黑体/Source Hans Sans的问题解决

IDEA、CLION的Jetbrain系列软件不支持非TrueType的中文字体&#xff0c;而Adobe官方给出的字体却不是TrueType的&#xff0c;所以便会导致Jetbrain系软件无法找到已安装的中文字体&#xff0c;因此我们需要安装TrueType的字体 请在以下Github链接中下载&#xff1a; TrueType思…

HDFS中数据迁移的使用场景和考量因素

HDFS中数据迁移的使用场景和考量因素 数据迁移使用场景数据迁移要素考量HDFS分布式拷贝工具-DistCpdistcp的优势性能命令 数据迁移使用场景 冷热集群数据同步、分类存储集群数据整体搬迁 当公司业务迅速的发展&#xff0c;导致的当前的服务器数量资源出现临时紧张的时候&#…

python-网络爬虫.Request

Request python中requests库使用方法详解&#xff1a; 一简介&#xff1a; Requests 是Python语言编写&#xff0c;基于urllib&#xff0c; 采用Apache2 Licensed开源协议的 HTTP 库。 与urllib相比&#xff0c;Requests更加方便&#xff0c;处理URL资源特别流畅。 可以节约我…

解读随机森林的决策树:揭示模型背后的奥秘

一、引言 随机森林[1]是一种强大的机器学习算法&#xff0c;在许多领域都取得了显著的成功。它由多个决策树组成&#xff0c;而决策树则是构建随机森林的基本组件之一。通过深入解析决策树&#xff0c;我们可以更好地理解随机森林模型的工作原理和内在机制。 决策树是一种树状结…

JavaEE简单示例——在使用Tomcat的时候可能出现的一些报错

简单介绍&#xff1a; 在我们之前使用Tomcat的时候&#xff0c;经常会出现在启动的时候因为一些报错导致项目无法正常的启动&#xff0c;我们就对一些比较常见的报错来看一下可能导致的原因&#xff0c;以及出现报错之后如何去解决。 严重: Failed to initialize end point a…