npm/pnpm包之硬链接和软链接

npm和pnpm作为包管理工具

在应用中npm会下载所有声明的依赖包以及依赖包的依赖包,v5版本之后有做缓存的优化,pnpm 为了解决npm的性能和磁盘问题,使用符号链接和硬链接来处理依赖,利用全局内存,并且避免重复的下载

本文主要介绍软/硬链接的使用以及其作用

1、 Windows系统mklink创建链接

了解npm和pnpm创建软硬链接之前,我们先了解一下Windows系统通过mklink命令创建符号链接实现软/硬链接,

打开cmd命令行(注意不是power shell),输入mklink命令回车,可以看到mklink命令对应的使用方法,默认为/D创建软连接,/H用来创建硬链接,Link和Target参数都为必填项

1.1:/H创建硬链接

首先在源目标文件夹中创建文件index.js

之后定位到需要创建硬链接的F:/newlink/文件夹目录,并打开cmd命令行执行命令

mklink /H index1.js "../link/index.js"

PS:Target参数的值如果带有特殊符号(\ / : * ? ” < > |)需要用双引号包裹

执行之后可以看到命令行提示创建了文件F:\newlink\index.js与源目标文件F:\link\index.js之间的硬链接;同时F:\newlink\文件夹下生成了对应的index.js文件

建立硬链接之后两个文件有什么特性呢?改一下文件内容试一下,分别更改两个文件夹下的index.js文件能够看到两边的文件内容会保持一致并且同步更新,类似于文件副本,不同点在于同步更新

1.2:/D创建软链接

硬链接可以创建文件副本,并同步更新,那软链接又有什么特性,可以用来干什么

我们同样在newlink文件夹下通过命令行创建软链接

执行命令提示我们没有足够的权限,以管理员模式打开命令行重新执行创建命令

创建命令结果提示创建了符号链接,打开文件夹发现与创建硬链接不同,软链接创建生成文件大小为0kb,并且图标类似与快捷方式

2、硬链接和软连接在npm和pnpm中的应用

2.1:npm和npm link

npm做包管理具有扁平化的项目结构,会对声明的依赖以及依赖包的依赖进行完全的下载,所以会消耗更多的下载时间和内存资源;同时可能导致不同包之间依赖版本冲突的问题;

但是npm拥有用户基础、文档支持,没有什么使用壁垒,在项目中得到普遍使用;

而关于软链接在npm中的使用,在想要做npm包开发,特别是组件库、方法库等的开发调试时,往往需要依赖项目进行调试,我们不可能使用发布上线的形式进行包的调试,而npm link可以通过创建软链接的形式,实现本地开发包的调试(如果存在多项目引用场景可以使用Yalc工具,不做介绍),操作步骤:

1、在开发的包根目录执行 npm link(注意项目是否需要构建更新)

2、在使用或引用包的项目目录下执行 npm link 包名,这个时候你会发现项目中引用的包已经软链到本地文件

3、如果完成调试或者想要释放软连接可以执行 npm unlink

2.2:pnpm和monorepo

使用 pnpm (项目初衷 | pnpm中文文档 | pnpm中文网)时,依赖会被存储在内容可寻址的存储中,如果你用到了某依赖项的不同版本,只会将不同版本间有差异的文件添加到仓库。

所有文件都会存储在硬盘上的某一位置。 当软件包被被安装时,包里的文件会硬链接到这一位置,而不会占用额外的磁盘空间。 这允许你跨项目地共享同一版本的依赖。

在项目安装依赖时,会进行依赖解析,对已经安装的全局包直接软链接到项目中。

Monorepo 是一种项目开发与管理的策略模式,它代表"单一代码仓库"(Monolithic Repository)。在 Monorepo 模式中,所有相关的项目和组件都被存储在一个统一的代码仓库中,而不是分散在多个独立的代码仓库中,可以实现多项目管理,业务组件库、方法库在多项目中的使用,而不需要将其发布到npm(有其他使用场景欢迎补充)。

而基于pnpm进行monorepo仓库创建时,

1、多项目文件夹目录下pnpm init之后新建pnpm-workspace.yaml文件

2、声明配置pnpm-workspace.yaml文件

packages:
  # 项目1文件夹名
  - 'project1'
  # 项目2文件夹名
  - 'project2'
  # 组件库文件夹名
  - 'components'
  # 方法库文件夹名
  - 'utils'

3、在需要共享但是没有package.json的文件夹如components中执行pnpm init进行初始化,并且在index文件中抛出组件或方法

4、引用组件/方法

// 根据组件名直接从声明的仓库中引入
import { ComponentsName } from 'components'

<think>好的,我现在需要回答用户关于如何使用pnpm运行build命令来打Jeecg前端项目以适应生产环境的问题。首先,我得回想一下Jeecg前端项目的结构以及常用的构建流程。 用户提到了使用pnpm,所以需要确认项目中是否支持pnpm。通常,JeecgBoot前端可能基于Vue或React,使用像Vue CLI或Create React App这样的脚手架工具,这些一般都支持pnpm。首先,用户需要确保已经安装了pnpm,如果没有的话,需要先全局安装。 接下来,检查项目根目录下是否有package.json文件,里面应该已经定义了build脚本。通常build命令会是类似"build": "vue-cli-service build"或者"build": "react-scripts build"。用户只需要运行pnpm run build即可触发生产环境的打。 不过,生产环境可能需要配置特定的环境变量,比如API接口地址。这时候需要确认项目是否使用了.env文件,例如.env.production。用户可能需要根据实际情况修改这些环境变量,确保后端接口地址正确。 另外,打后的静态资源路径可能需要配置,比如如果项目部署在子目录下,需要设置publicPath。这通常在vue.config.js或项目配置文件中设置,用户可能需要调整这个路径以避免资源加载错误。 还有可能遇到的问题是依赖安装是否正确。使用pnpm安装依赖时,由于它默认使用软链接严格的node_modules结构,有时候可能会缺少某些依赖。这时候需要检查是否所有依赖都正确安装,或者尝试删除node_modules后重新运行pnpm install。 另外,构建过程中可能会遇到内存不足的问题,尤其是在大型项目中。这时候可以尝试增加Node.js的内存限制,比如在命令行中添加--max-old-space-size=4096参数。 最后,用户可能想知道构建后的输出目录在哪里,通常是dist或build文件夹。需要提醒用户部署时将该目录的内容放到Web服务器上,并配置正确的路由规则,以支持前端路由的History模式。 总结步骤应该是:安装pnpm→安装依赖→配置环境变量→运行构建命令→处理可能的问题→部署。同时,需要提供一些常见问题的解决方法,比如环境变量配置、资源路径问题、依赖安装问题等。</think>以下是为Jeecg前端项目使用pnpm进行生产环境打的详细步骤: ### 1. 前置条件准备 - 确保已安装Node.js(建议v14+/v16+) - 全局安装pnpm: ```bash npm install -g pnpm ``` 验证安装: ```bash pnpm -v ``` ### 2. 依赖安装 进入项目根目录执行: ```bash pnpm install ``` 该命令会创建严格的`node_modules`结构,比npm/yarn更节省空间[^1] ### 3. 环境配置 1. 创建生产环境配置文件: ```bash cp .env.development .env.production ``` 2. 修改`.env.production`: ```ini NODE_ENV=production VUE_APP_API_BASE_URL=/prod-api/ # 生产环境API地址 ``` ### 4. 执行构建 ```bash pnpm run build ``` 构建过程会: - 压缩所有静态资源 - 生成sourcemap(默认配置) - 输出到`dist/`目录 ### 5. 高级配置(可选) 在`vue.config.js`中添加: ```javascript module.exports = { productionSourceMap: false, // 关闭sourcemap assetsDir: 'static', // 静态资源子目录 publicPath: process.env.NODE_ENV === 'production' ? '/jeecg/' // 部署路径 : '/' } ``` ### 6. 构建验证 检查`dist/`目录结构应含: ``` dist/ ├── static/ │ ├── js/ │ ├── css/ │ └── img/ └── index.html ``` ### 常见问题解决 1. **内存不足**: ```bash NODE_OPTIONS=--max_old_space_size=4096 pnpm run build ``` 2. **依赖缺失**: ```bash rm -rf node_modules && pnpm install --force ``` 3. **API地址错误**: - 检查`.env.production`中的`VUE_APP_API_BASE_URL` - 确保后端服务CORS配置正确
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值