前端项目，将package.json数据放到项目某处使用

最新推荐文章于 2025-01-21 09:34:49 发布
原创 最新推荐文章于 2025-01-21 09:34:49 发布 · 762 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了项目中配置文件从 package.json 到 setting.js 再到 release.js 的流转过程，揭示了这一过程中配置信息如何被逐步处理和使用的实质。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

外部配置，内部使用，抽出来配置信息
1、在这里插入图片描述
2、
在这里插入图片描述
3、
在这里插入图片描述

  • package.json => setting.js =>release.js
  • 实质：=》》》》》》
  • json对象 =>json对象 =>json对象
面试官：听说你对package.json很熟？package.json百科全书 全网最全package.json介绍大全 v7版本全解
cuandeqin2083的博客
06-27 773
前言 平常在工作中，对package.json这个文件的接触非常非常少。 一些同学可能还会看一下script里面有什么命令，执行了哪些方法。 又或者了解一下dependencies和devDependencies 其他大部分的同学可能直接就npm i和npm start就开始工作了。 但是package.json的魅力远不止如此 今天就和我一起探索一下这个项目中不可或缺的——package.json吧！ 由浅入深-核心内容 准备工作 手摸手新建一个空的package.json n
uniapp package.json和mainfest.json，如何区分环境变量
qq_42440919的博客
03-30 1274
g' ${target_dir}/src/manifest.json ，意思就是把“base”后面的值改为"base" : "/html/js-h5-test/"如果是往服务器上发布版本，则是打包成zip在服务器上解压，但注意打包：是把原有的uniapp项目下的所有文件，放到一个对应vue项目的src下（这个是提前建好的项目），然后打包，打包是根据vue项目中的package.json来打包的。g' ${target_dir}/src/manifest.json，意思就是把“base”后面的值改为h5.
npm无异常，项目目录下却没有package.json文档
weixin_47517176的博客
06-08 5054
运行npm install module --save命令，创建package.json文档
从0-1搭建一个web项目(package.json)详解
共同进步
06-27 1009
本文主要对packge.json配置子文件详解ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。
关于前端大管家 package.json，你知道多少？
很多时候犯错都是在不知情的情况下发生的
06-25 413
在每个前端项目中，都有package.json文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json文件是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。package.json作为前端的大管家，到底有哪些配置和我们的日常开发密切相关？下面就来仔细剖析一下这个文件。...
package.json属性
weixin_48723799的博客
05-20 1458
目录 概述 name version description keywords homepage bugs license 和用户相关的属性: author, contributors files main bin 概述 package.json必须是一个严格的json文件，而不仅仅是js里边的一个对象。其中很多属性可以通过npm-config来生成 name package.json中最重要的属性是name和version两个属性，这两个属性是必须要有的，否则模块就
前端必须掌握的package.json最新最全指南
前端开发工程师博客
06-07 1644
package.json 是一个用于描述和配置项目的重要文件，其中包含了许多字段和选项，可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为。package.json对于大部分前端开发者来说，知道dependencies与devDependencies就够了。但对于库开发者或有更高级需求的开发者来说，了解 package.json 的其他字段是非常有必要的。本文介绍的字段分为官方字段与非官方字段。
node.js 之gulb包详细学习和package.json (持续学习中）
qq_52037321的博客
04-01 1084
本文主要介绍 gulp 安装和使用 已经一些插件 还有package.json 用途 和node.js模块加载机制
electron 安装打包更新配置，main.js /package.json配置
只愿做一个伸手党的，快乐的码农
02-08 1万+
electron 安装打包更新配置，main.js /package.json配置 最近因为项目的原因需要将已完成好的react项目封装成一个桌面应用，作为已个纯前端的伸手党，开始接触到了electron，由于本人做伸手党惯了，记不住太多的配置，又怕自己忘记，所以写篇文章记录下，好了，不多说直接上代码，伸手党请进。 package.json和main.js配置 首先简单说一下我的思路，先将已经完...
前端自动化部署 Vue 配置生产环境、测试环境和开发环境到package.json，然后使用npm run 命令快速运行或打包，而不用每次都手动修改路径
weixin_43764828的博客
10-28 1619
项目背景： mpvue 微信小程序 期望效果：直接运行npm run dev:test:wx ,就可以运行测试环境，而不用手动修改后台路径。 参考文章：https://segmentfault.com/a/1190000016664571 采用往前推的方法： 首先，我需要用npm run dev:test:wx的命令来快速运行前端测试环境。而且不希望每次手动去修改地址。 "dev:test:wx": "node build/test.js wx",　找到build文件夹，下面创建一...
前端项目中package.json到底是什么，又充当着什么作用呢？一文来带你了解package.json！
纸飞机博客
09-07 9244
大家好，我是纸飞机，想必大家都在项目中经常看见package.json、package-lock.json、node_modules这三剑客，那么他们到底是什么呢？又有什么作用呢？今天就来带你们理一遍！ 一、引读 在大家的印象中，说明书具有哪些要素？例如一盒药。 就像这份说明书，它有：药品名称、成分、类别等等说明！package.json同样如此，所以可以毫不夸张的说，它也是一份说明书！那么我们的package.json到底说明了什么呢？下面就进入正题为您一一讲解。 二、package.js.
【npm】前端工程项目配置文件package.json详解
qq_2511276124的博客
03-08 3863
详细介绍了package.json中每个字段的作用。
package.json：前端项目不可或缺的 “心脏” 与工作原理
向着太阳迎着光
01-21 1482
是 Node.js 项目的核心配置文件，广泛应用于前端、后端开发以及全栈项目中。在前端项目中，不仅是管理项目的关键配置文件，还能帮助管理项目的依赖、脚本、版本控制、配置等内容。接下来，我将从文件的作用、用途、依赖关系等方面进行详细讲解，并结合实际项目代码示例进行说明。
package.json 最全详解
热门推荐
qq_34703156的博客
11-18 5万+
今天来看看前端的大管家 package.json 文件相关的配置，充分了解这些配置有助于我们提高开发的效率，规范我们的项目。文章内容较多，建议先收藏在学习！ 在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。package.json 作为前端的大管家，到底有哪些配置和我们的日常开发密切相关？下面就来仔细剖析一下这个文件。 当我们搭..
关于项目中package.json的理解
weixin_44051815的博客
03-04 2116
package.json的注意事项和用处 package.json中添加备注会报错；最然他有其他用途，但是他本质上还是json文件，因此也有所有json的通性，如此处的不能添加备注； 当我们需要npm install为项目安装依赖时，会自动将当前目录下的package.json中的dependencies，devDependencies的模块安装到node_modules文件夹下； npm i...
json文件_package.json 文件详解
weixin_39696518的博客
11-27 272
前言随着前端由多页面到单页面，由零散的文件到模块化开发，在一个完整的项目中，package.json 文件无处不在。首先，在项目根目录会有，其次在 node_modules 中也频现。那么这个文件到底是干嘛的，又有什么作用，今天给大家揭晓。一、package.json 文件作用package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件...
前端自动化之package.json
zhanglongdream的博客
09-27 2510
package.json 中包含各种所需要的模块以及项目的配置信息包括  名称 ， 版本 ， 许可证等 各个参数的作用  "name"    包名 "author" 包作者 "version" 版本号 “repository”  源码托管地址 "maintainers" 包维护者列表， 一般有name email web 三个属性组成 "contributots"   贡献者
Json打包与解析
u010949962的专栏
12-06 2349
package com.example.global; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.json.JSONArray; import org.json.JSONException; impo
前端开发中，如何利用pnpm workspaces实现把多个项目放到一个仓库，然后，多个项目可以自己独立打包，但是，多个项目是可以共用同一个文件下的工作组件或者是公共方法。比如，远程仓库中，有一个public文件夹，其下面会有components, directives,utils文件夹，且每个文件夹都有自己的的公工作组件或方法。我可以给components,directives,utils文件添加一个package.json，使得他们都是一个包，然后，在与.pnpm workspaces所在目录中，添加一个package.json文件，其中该package.json文件中的dependencies中分别引入components, directives,utils对应的包，
最新发布
03-14
<think>嗯，用户想在前端开发中用pnpm workspaces把多个项目放到一个仓库里，同时共享公共组件和方法。首先，我需要确认pnpm workspaces的基本用法。工作区允许在单个仓库中管理多个包，通过workspace协议引用本地包。 用户提到有一个public文件夹，里面有components、directives、utils，每个都是独立的包。所以每个子目录下需要有自己的package.json，设置正确的name和版本。然后在根目录的package.json中配置workspaces字段，指向这些包的位置。 接下来，用户可能想在其他项目中引用这些公共包。比如，在app1里依赖components，需要使用workspace:*协议，这样pnpm会从本地链接而不是远程安装。同时，公共包之间如果有依赖，也需要正确声明，比如utils可能被components依赖，这时components的package.json里要加上对utils的workspace引用。 然后，用户需要确保每个项目都能独立打包。每个子项目（如app1、app2）应该有各自的构建脚本，并且在根目录可以统一运行所有构建命令。可能需要使用pnpm -r run build来递归执行各包的build命令。 还需要考虑版本管理和发布。如果公共包需要单独发布，要处理版本号更新和发布流程。不过用户可能暂时只需要本地开发，所以这部分可能暂时不需要深入。 可能遇到的坑：路径配置是否正确，workspace协议是否生效，依赖是否被正确解析。还有，公共包如果使用TypeScript，可能需要配置项目引用或者路径别名，确保类型正确。 用户的结构应该是这样的： - 根目录（pnpm-workspace.yaml，package.json） - public/ - components/package.json - directives/package.json - utils/package.json - apps/ - app1/package.json（依赖components等） - app2/package.json 需要检查pnpm-workspace.yaml中的packages配置是否正确包含public和apps下的目录。然后，安装依赖后，各子包应该能正确引用到本地的workspace包。 测试步骤：在根目录运行pnpm install，查看node_modules中的链接是否正确。然后在app1中导入components，看是否能正确解析。再运行各自的build命令，确认独立打包是否成功。 另外，公共包可能需要导出模块，比如在utils的package.json中设置main或module字段指向构建后的入口文件，或者直接源码入口，视具体构建工具而定。 总结步骤：初始化工作区，配置子包，设置依赖关系，安装链接，处理构建配置。用户可能需要根据具体框架（如Vue、React）调整打包配置，确保公共包的导出和引用方式正确。</think>好的，我将逐步解释如何利用 `pnpm workspaces` 实现多项目仓库（monorepo）管理，并共享公共组件/方法： --- ### 一、项目结构设计 建议按如下目录组织（示例）： ``` your-repo/ ├── pnpm-workspace.yaml # 声明工作区 ├── package.json # 根目录package.json（可选） ├── public/ # 共享模块 │ ├── components/ │ │ ├── src/ # 组件源码 │ │ └── package.json # name: "@your-scope/components" │ ├── directives/ │ │ ├── src/ │ │ └── package.json # name: "@your-scope/directives" │ └── utils/ │ ├── src/ │ └── package.json # name: "@your-scope/utils" └── apps/ ├── app1/ # 独立项目1 │ ├── src/ │ └── package.json # 依赖公共模块 └── app2/ # 独立项目2 ├── src/ └── package.json ``` --- ### 二、核心配置步骤 #### 1. 创建 `pnpm-workspace.yaml` 在根目录创建文件，定义工作区范围： ```yaml packages: - "public/*" # 公共模块 - "apps/*" # 子项目 ``` #### 2. 配置公共模块（以components为例） 在 `public/components/package.json` 中： ```json { "name": "@your-scope/components", "version": "1.0.0", "main": "dist/index.js", // 打包后的入口 "scripts": { "build": "your-build-command" // 如vite build、tsup等 } } ``` #### 3. 根目录的 `package.json`（可选） ```json { "scripts": { "build": "pnpm -r run build" // 递归执行所有子包的build命令 } } ``` #### 4. 子项目引用公共模块（以app1为例） 在 `apps/app1/package.json` 中： ```json { "dependencies": { "@your-scope/components": "workspace:*", "@your-scope/utils": "workspace:*" } } ``` --- ### 三、工作流程 #### 1. 安装所有依赖 ```bash pnpm install ``` #### 2. 链接本地包 公共模块会被自动软链接到 `node_modules/.pnpm` 中，无需手动发布 #### 3. 独立打包 ```bash cd apps/app1 && pnpm build ``` #### 4. 全局构建所有包 ```bash pnpm run build # 触发根目录的build脚本 ``` --- ### 四、注意事项 1. **依赖提升** 在根目录添加 `.npmrc` 文件可控制依赖行为： ```ini shamefully-hoist = true # 提升所有依赖到根node_modules ``` 2. **版本管理** 使用 `pnpm update -r` 可批量更新所有子包依赖 3. **跨包引用** 如果 `components` 依赖 `utils`，需要在 `components/package.json` 中： ```json { "dependencies": { "@your-scope/utils": "workspace:*" } } ``` 4. **TypeScript支持** 在根目录配置 `tsconfig.json` 的路径映射： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@your-scope/*": ["public/*/src"] } } } ``` --- ### 五、优势总结 - ✅ 代码复用：公共模块统一管理 - ✅ 依赖隔离：每个子项目有独立node_modules - ✅ 高效安装：所有依赖仅下载一次到store - ✅ 原子化提交：配合changesets可实现批量版本管理 遇到具体问题时可进一步讨论实现细节！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值