目录
一、npx
1、npx命令执行过程
* webpack命令执行过程:执行命令所在目录是否有webpack命令,有则执行,
没有则找环境变量是否有webpack命令,有则执行
* npx webpack命令执行过程:执行命令所在项目是否有webpack命令,有则执行,
没有则找全局是否有webpack命令,有则执行,
没有则会安装webpack到一个临时目录,然后执行,执行结束会删除webpack
* package.json中配置{"scripts": {"build": "webpack"}},
执行npm run build,执行的是所在项目的webpack命令
二、pnpm
1、硬链接和软链接
* 文件的拷贝
- window:copy foo.js foo_copy.js
- macos:cp foo.js foo_copy.js
- 原文件和拷贝文件没有影响
* 文件的硬链接
- window:mklink /H aaa_hard.js aaa.js
- macos:ln foo.js foo_hard.js
- 原文件修改,硬链接也会修改。删除原文件,硬链接依然可以访问
* 文件的软链接
- window:mklink aaa_soft.js aaa.js
- macos:ln -s foo.js foo_copy.js
- 删除原文件,软链接不可以访问
2、pnpm到底做了什么呢?
* 如果是使用pnpm,依赖包将被存放在一个统一的位置,因此:
- 如果你对同一依赖包使用相同的版本,那么磁盘上只有这个依赖包的一份文件;
- 如果你对同一依赖包需要使用不同的版本,则仅有版本之间不同的文件会被存储起来;
- 所有文件都保存在硬盘上的统一的位置:
~ 当安装软件包时,其包含的所有文件都会硬链接到此位置,而不会占用额外的硬盘空间
~ 这让你可以在项目之间方便地共享相同版本的依赖包;
3、pnpm创建非扁平的node_modules目录
* 安装pnpm:npm i -g pnpm
* 查看pnpm版本:pnpm --version
* pnpm初始化:pnpm init
* pnpm添加依赖包:pnpm add axios
* pnpm创建的非扁平node_modules目录结构:
- node_modules/axios是软链接
- node_modules/.pnpm/axios是硬链接
4、npm与pnpm命令对照表
pnpm | npm |
---|---|
pnpm install | npm install |
pnpm add <pkg> | npm install <pkg> |
pnpm remove <pkg> | npm uninstall <pkg> |
pnpm <cmd> | npm run <cmd> |
5、pnpm仓库
* 获取pnpm仓库目录:pnpm store path
* 不同磁盘是不能建立硬链接的
6、pnpm仓库瘦身
* pnpm仓库瘦身:pnpm store prune
三、pnpm monorepo
1、工作区根目录
- 命令
* 初始化:pnpm init
* 创建组件库:npm create vite
- components
- vue
- javascript
- 新建pnpm-workspace.yaml
# 此文件所在目录,即为工作区根目录
packages:
# 我负责的所有的前端项目存储的地方
- 'packages/*'
# 公共的,给我所有的项目使用的公开组件
- 'components/**'
# 公共的方法 api -axios
- 'api/**'
2、api
- 命令
* 初始化:pnpm init
* 安装:pnpm add axios
- 工作区根目录为硬链接,非工作区根目录为软链接
- package.json
{
"name": "@linding-pnpm/api",
"version": "1.0.0",
"private": true,
"main": "index.js"
}
- index.js
export * from "./user"
- user.js
import Axios from "./base"
export const getUser = (data) => Axios.get(data)
- base.js
import axios from "axios"
let Axios = axios.create({
baseURL: "/"
})
export default Axios
3、components
- 命令
* 安装:pnpm i
- 不安装的话packages/web执行npm run build会报错
- package.json
{
"name": "@linding-pnpm/components",
"private": true,
"version": "0.0.0",
"main": "index.js"
}
- index.js
import Button from "./dir/Button.vue";
export default Button
- dir/Button.vue
<template>
<button>我是一个按钮,我是公共的组件</button>
</template>
4、packages
- 命令
* packages命令:npm create vite
- web
- vue
- javascript
* packages/web命令:pnpm i
* packages/web命令:npm run dev
* packages/web命令:pnpm add @linding-pnpm/api
* packages/web命令:pnpm add @linding-pnpm/components
- packages/web/src/App.vue
<script setup>
import {getUser} from "@linding-pnpm/api";
import Button from "@linding-pnpm/components";
console.log(getUser)
</script>
<template>
<Button></Button>
</template>
<style scoped>
</style>