【总结】1761- 了解并实践 Monorepo 和 pnpm 什么是monorepo 简单来说就是,将多个项目或包文件放到一个git仓库来管理。 目前比较广泛应用的是yarn+lerna的方式实现monorepo的管理。 一个简单的monorepo的目录结构类似这样: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 js 复制代码 ├── packages|├── ...
新建一个projects文件夹/初始化一个vite项目 代码语言:javascript 代码运行次数:0 运行 AI代码解释 mkdir projects// 进入到projectscd projects// 初始化一个vite项目pnpm create vite// 进入到项目(假设你起的项目名字是webOne)cd webOne// 安装依赖pnpm i// 启动项目pnpm run dev 在projects文件夹下面另外初始...
1、vite安装(来自官网命令) npm: npm init vite@latest yarn: yarn create vite pnpm: pnpm create vite 也可以通过以下命令直接设置项目名和框架 npm 6.x npm init vite@latest my-vue-app --template vue npm 7+:, extra double-dash is needed: npm init vite@latest my-vue-app -- --template vue...
把src目录、vite.config.js和index.html移到packages文件夹下改名main,然后在packages下创建api目录 4、在main、api目录下分别pnpm init -f生成package.json name分别为:@momovue/main、@momovue/api 如果想添加公共框架包直接在根目录执行pnpm install module_name 5、api项目单独添加框架,并且添加index.ts测试文件 ...
使用pnpm创建monorepo 目标 使用PNPM包管理器及其工作区功能创建 monorepo。 与yarn workspace相比,PNPM 工作区的主要优势在于公共包不会被提升到根目录,从而使所有workspace包完全隔离。 使用的技术/功能 我们要构建的 monorepo 将使用这些技术栈。当然可以根据自己的喜好随意更改。
这些包管理工具与 monorepo 的关系在于,它们可以为 monorepo 提供依赖安装与依赖管理的支持,借助自身对 workspace 的支持,允许在 monorepo 中的不同子项目之间共享依赖项,并提供一种管理这些共享依赖项的方式,这可以简化依赖项管理和构建过程,并提高开发效率。
当你在一个monorepo项目中工作,并希望当utils模块的内容改变时,pkg0能够立即反映这些变化,同时确保打包文件的安全性(即不直接指向源码),你通常需要配置一个热更新(Hot Module Replacement, HMR)的环境。 对于Vite或Webpack这样的打包工具,它们通常内置了HMR功能。但是,为了使HMR工作,你需要确保: 打包工具配置:你的打...
配置monorepo 在项目的根目录中创建pnpm-workspace.yaml文件,并添加以下内容: yaml packages:-'packages/*' 这段代码的意思就是将packages目录下所有的目录都当作单独的包进行管理。通过上面简单的配置,monorepo的开发环境就搭建完成了。 安装依赖 正如vite一样,我们在开发阶段采用esbuild作为构建工具,在生产阶段采用rollu...
通过这样一个简单的配置,Monorepo开发环境搭建好了。 如果大家之前接触过lerna + yarn workspace的方案,就会深有体会,使用pnpm的确方便。Vue3,Element Plus以前采用的方案就是前者,现在都已经改用后者了。 安装依赖 如果你使用过Vite,就一定体验过它的快。因为Vite内置了esbuild作为开发阶段的构建工具。esbuild的特点就...
pnpm create vite app1 --template react-ts 先不对app1进行install。 在packages中创建utils文件夹,并执行pnpm init。 修改生成的package.json文件,并将name修改为@test/utils修改入口main为index.ts 最终utils中的package.json如下: {"name":"@test/utils","version":"1.0.0","description":"","main":"in...