wordpress 视频站模板,宁波优化推广,软件开发平台建设,免费发布广告的网站monorepo 前言1、搭建空项目并配置pnpm-workspace.yamlpnpm initpnpm-workspace.yaml 2.配置packages测试文件配置相关内容 3.引入packages内容至公共package.json4.创建测试项目#xff0c;并引入公共包结语 前言
有个项目要引入一个第三方库#xff0c;但是第三方库下载下… monorepo 前言1、搭建空项目并配置pnpm-workspace.yamlpnpm initpnpm-workspace.yaml 2.配置packages测试文件配置相关内容 3.引入packages内容至公共package.json4.创建测试项目并引入公共包结语 前言
有个项目要引入一个第三方库但是第三方库下载下来的npm包不能满足完整需求。所以想用monorepo的方式来引入这个第三方库并且可以修改第三方库的内容。基于此学习了monorepo的相关基础知识本文主要讲解monorepo如何从0到1搭建。
技术栈npm、pnpm、vite
1、搭建空项目并配置pnpm-workspace.yaml
首先搭建一个空项目也就是一个空文件夹并且在vscode中打开这个文件夹名称任意。 实现monorepo比较简单的方法就是用pnpmworkspace.yaml文件去实现所以我们首先要初始化项目用pnpm然后创建pnpm-workspace.yaml文件去配置我们monorepo具体地址。
pnpm init 初始化后应该有一个package.json文件。这里需要加一行代码private:true,来设置私有化防止被发布
pnpm-workspace.yaml
然后去手动添加一个文件pnpm-workspace.yaml,并且在其中设置具体公共包与项目的地址并且去创建对应的文件夹。 如图所示就是初始化也就是第一步完成了。
2.配置packages测试文件
首先一般公共包都有一个css也就是ui库和一个配置util库那么我们新建两个文件夹cssUI和util文件夹并且用pnpm init分别给他们初始化初始化后记得要加上private:true.结果如下 名字可能会重复所以我在前面加上了lp/utils等。
配置相关内容
写测试文件的目录如下 myUI.vue
templatediv我有多少钱: {{ data }}el-button typeprimary clickaddData加一百/el-button/div
/template
script setup langts
import element-plus/dist/index.css;
import { ElButton } from element-plus;
import { addData, data } from lp/utils
/scriptui下的index.js
import myUI from ./components/myUI.vueexport {myUI
}ui下的package.json
{name: lp/csss,version: 1.0.0,description: ,main: index.js,private: true,scripts: {test: echo \Error: no test specified\ exit 1},keywords: [],author: ,license: ISC,dependencies: {element-plus: ^2.8.3,pnpm: ^9.10.0,vue: ^3.5.6}
}dataUtil.js
import { ref } from vueexport let data ref(100)export const addData () {data.value data.value 100;
}utils下的index.js
export { addData, data } from ./dataUtil utils下的package.json
{name: lp/utils,version: 1.0.0,description: ,main: index.js,private: true,scripts: {test: echo \Error: no test specified\ exit 1},keywords: [],author: ,license: ISC
}最后因为cssui文件夹下用到了element-plus所以需要下载element-plus,
pnpm install vue element-plus3.引入packages内容至公共package.json
引入上述写入的内容到package里面两种方案第一种
pnpm install -w lp/utils lp/csss这时候有可能网络延迟下载包失败那就只能手动引入后install。 dependencies: {lp/utils:workspace:^,lp/csss:workspace:^}然后 pnpm install
4.创建测试项目并引入公共包
首先打开终端并跳到apps文件夹下。并通过pnpm create vite来设置一个vue项目具体流程如下 然后根据流程来引入并install
cd test
pnpm install最后把app.vue的内容修改并运行
script setup
import { myUI } from lp/csss
/scripttemplatedivmyUI/myUI/div
/template最后成功引入
结语
最终其实就是这样的效果其中monorepo除了最简单的pnpm外还可以使用turborepo实现这里就不赘述了。
