【常识】npm && pnpm基础

npm

package.json配置

require('XXX') 默认值找node_modules/XXX/index.js
依赖版本前缀（x.y.z）
- ^: x版本不变,yz版本更新
- ~: xy版本不变,z版本更新

{
    private, // 当值为true时，npm不能发布（防止误操作）
    main,   // 入口文件，require('XXX') 找node_modules/XXX/{ mainValue }.js  commonjs
    module, // 入口文件，import xxx from 'XXX' esm
    unpkg,  // cdn 服务商
    jsdelivr, // cdn 服务商
    typings, // .d.ts文件位置
    engines, // 指定Node和npm版本号
    files, // 将符合规则的文件传入npm文件
    exports, // 支持条件判断 构建器支持exports 则读取exports，如果不支持，就使用之前的配置
    sideEffects: false // treeshaking
}

npx

直接调用当前目录node_modules/.bin下的命令

发包

注册npm
登录npm login
修改package.json
发布npm publish

删除

删除：npm unpublish
过期：npm deprecate

使用相关问题

不认import/require语法

通过webpack打包
新建html文件，引入dist内打包后的文件

pnpm

常用命令

pnpm store path: 查看pnpm的存储store路径
pnpm store prune: 从store中删除当前未被引用的包来释放store空间

软链接与硬链接

硬链接：电脑文件系统中的多个文件平等的共享同一个文件存储单元（无法跨磁盘）
软链接：包含有一条以路径的形式指向其他文件或者目录的引用
硬链接与复制的不同：硬链接修改一个文件的内部，被链接的文件也会修改
硬链接与软链接的不同：删除原始文件后，硬链接依旧能够读取，软链接则报找不到文件

创立软链接与硬链接

格式：window/mac

复制: copy foo.js foo_copy.js / cp foo.js foo_copy.js
硬链接: mklink /H 链接出的文件原文件 / ln 原文件链接出的文件
软链接: mklink 链接出的文件原文件/ln -s 原文件链接出的文件

权限问题：以管理员身份打开

优势

占用空间小：
- 依赖包被存放在一个统一的位置，项目内部通过链接进行关联
- node_modules/.pnpm/node_modules内部的同名依赖为硬链接，依赖的依赖为软链接，链接到内部一级目录
- node_modules目录下为软链接(代码使用的包)，链接到node_modules/.pnpm内部
非扁平式
- 解决幽灵依赖问题（源码中可以直接访问依赖的依赖（本不属于当前项目所设定的依赖包））

monorepo入门例子

pnpm init

新建pnpm-workspace.yaml配置,定义工作空间的根目录

packages:
# 所有的前端项目存储的地方
- 'packages/*'
# 给我所有项目使用的公共组件 
- 'components/**'
# 公共方法 api
- 'api/**'

新建api目录

执行pnpm init & pnpm add axios

新建base.js,user.js,index.js(main指向的入口)


// base.js
import axios from 'axios'
let Axios = axios.create({
baseURL: '/'
})
export default Axios

// user.js import Axios from './base' export const getUser = (data) => Axios.get(data)

// index.js export * from './user'

   3. 修改api内部`package.json`
```js
{
  "name": "@projectName/api",
  "private": true
}

新建packages目录，
1. npm crate vite创建项目
2. cd进入项目，pnpm i
3. 需要在项目中使用api目录中公开的请求
  1. pnpm add @projectName/api
  2. 项目中的package.json中可以看到dependencies中存在依赖
  3. 项目中使用import {getUser} from "@projectName/api"
根目录执行npm crate vite创建components目录
1. 内部创建Button.vue组件
2. 安装依赖，否则打包报错
3. 新建index.js, import Button from './dir/Button.vue'; export default Button
4. 修改package.json
```
{
"name":"@projectName/components",
"private": true,
"main"： "index.js"
}
```
5. 需要在项目中使用api目录中公开的组件
  1. pnpm add @projectName/api
  2. 项目中的package.json中可以看到dependencies中存在依赖
  3. 项目中使用import Button from "@projectName/components"

sleepyShen1989 / blog

【常识】npm && pnpm基础 #19

npm