当前位置: 首页 > news >正文

package.json 里面出现 workspace:*,关于工作区的解释

当package.json 里面出现 workspace:*,一般用的是 MonoRepo 策略,关于这个策略,懂的就懂,不懂的也可以继续看下去,能理解 workspace:* 的

当使用 workspace 的时候,一般是我们有一个专门存放公共 包(方法,组件)的工作,供其他项目使用,而不需要在每个项目中单独 下载

下面我用例子解释一下

 先解释一下 package.json 里面有这个

"private": true,

代表这个包(项目)是私有的,不会 publish 到 npm上面,一般要出现 workspace 都会设置这个值为 true 的

接下来我用例子解释一下,由于 目前版本 的npm(7.x 及以上版本)和 Yarn(1.x 及以上版本)对 workspace 都支持,pnpm 是原生就支持的,所以下面我用 npm 来进行演示

我现在有一个文件夹 trim ,用 vscode 打开,并进行

npm init

 此时会在该目录下生成 package.json 文件,然后我们在 package.json 中添加

  "private": true,"workspaces": ["packages/*"],

这段配置代表 我们当前的项目是私有的,不会发布到 npm 上去,并且,我们把当前目录下的 packages 文件夹作为工作区

之后我们在目录下创建两个文件夹 packages 和 apps,由于一般会有多个公共的包,所以再在 packages 创建一个文件夹叫 log,然后进入到 log 文件夹,也进行初始化

cd .\packages\log\
npm init

之后把 log 里面的 package.json 的 name 改为 @log/trim,此时文件的目录是这个样子的

然后再在 log 目录下建一个 index.js 文件,里面写一个公共的方法

export function trimLog(str){return `这是你要内容${str}`
}

此时我们切换到根目录 trim 进行

npm install

可以看到 npm 自动把我们工作区的包生成了一个 node_modules

接下来测试能否使用

我们进入到 apps 目录进行创建 vue 项目,然后在安装相关依赖

cd .\apps\
npm create vite
cd 你的vue项目目录
npm i 

我们把 vue 项目里面的 App.vue 代码改为

<script setup>
import { trimLog } from '@log/trim'
const handleClick = () => {console.log(trimLog('点击了'))
}
</script><template><div><div @click="handleClick">点击我试试</div></div>
</template><style scoped></style>

此时,vue 的 App.vue 和 vue 里面的 package.json 是这样的

然后我们

npm run dev

启动 vue 项目,

可以看到 @log/trim 的方法是可用的,说明公共的包配置成功

这里我说明一下,这里没有专门配置到哪个工作区,vue 项目寻找的时候,应该是当前目录没有找到,然后又跳到父级目录去找,之后找到的,关于 workspace 还有一些配置,大家自己去研究了,这里做一个简单的演示

http://www.xdnf.cn/news/12241.html

相关文章:

  • 极狐GitLab 账号限制有哪些?
  • 使用MetaGPT 创建智能体(2)多智能体
  • 抽象类和接口的区别
  • 基于X86/RK/全志+FPGA+AI工业一体机在电力接地系统中的应用方案
  • 【人力资源管理系统】C#实现
  • 国产品牌芯洲科技100V降压芯片系列
  • vscode 红色波浪线问题
  • YOLOv8 Bug 及解决方案汇总 【2024.1.24更新】【环境安装】【训练 断点续训】OMPError / KeyError
  • 深度学习3.1 线性回归
  • vcpkg缓存问题研究
  • volatile 和 memory barrier 的组合用法
  • xml+html 概述
  • React 事件处理基础
  • 简单好用的在线工具
  • Webpack基础
  • PHP8.2.9NTS版本使用composer报错,扩展找不到的问题处理
  • 清华大学李升波教授的强化学习Tutorial Lecture
  • 2D物体检测学习
  • Linux 系统编程 day4 进程管道
  • 多线程使用——多线程的创建和常用方法
  • 2025年MathorCup数学应用挑战赛【选题分析】
  • Android tinyalsa库函数剖析
  • nginx 在 windows 中 部署 jar包 和 dist包
  • 深度学习基础--CNN经典网络之InceptionV3详解与复现(pytorch)
  • goland做验证码识别时报“undefined: gosseract.NewClient”
  • 哪种电脑更稳定?Mac?Windows?还是云电脑? 实测解密
  • 对WAV文件进行降噪
  • 探索 Higress:下一代云原生 API 网关
  • ulauncher软件启动器
  • Nacos 中使用了哪些缓存?缓存的目的是什么?是如何实现的?