Vue3中怎么使用pnpm搭建monorepo开发环境

这篇文章主要介绍了Vue3中怎么使用pnpm搭建monorepo开发环境的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3中怎么使用pnpm搭建monorepo开发环境文章都会有所收获，下面我们一起来看看吧。Pnpm 是新一代的 nodejs 包管理工具。第一个 “P”意为 Performance，代表着更佳的性能。它的主要优点有两个，一是采用了 hard-link 机制，避免了包的重复安装，节省了空间，同时能提高项目依赖的安装速度。二是对monorepo 的支持非常友好，只需要一条配置就能实现。Monorepo 是一种新的仓库管理方式。过去的项目，大多采用一个仓库维护一个项目的方案。对于一个庞大复杂的项目，哪怕只进行一处小小的修改，影响的也是整体。而采用 monorepo 的形式，我们可以在一个仓库中管理多个包。每个包都可以单独发布和使用，就好像是一个仓库中又有若干个小仓库。Vue3 源码采用 monorepo 方式进行管理，将众多模块拆分到 packages 目录中。这带来的最直观的好处，就是方便管理和维护。而且，它不像 Vue2 那样将源码整体打包对外暴露。Vue3的这种组织形式，方便的实现了 Tree-shaking，需要哪个功能就引入对应的模块，能大大减少打包后项目的体积。首先全局安装 pnpm：新建一个目录并进行初始化：在项目根目录下新建 pnpm-workspace.yaml 文件：意思是，将 packages 目录下所有的目录都作为单独的包进行管理。通过这样一个简单的配置，Monorepo 开发环境搭建好了。如果大家之前接触过 lerna + yarn workspace的方案，就会深有体会，使用 pnpm 的确方便。Vue3，Element Plus以前采用的方案就是前者，现在都已经改用后者了。如果你使用过 Vite，就一定体验过它的快。因为 Vite 内置了 esbuild 作为开发阶段的构建工具。esbuild 的特点就是快。Vue3 采用了和 vite 一致的选择，开发阶段使用 esbuild 作为构建工具，在生产阶段采用 rollup 进行打包。我们先安装一些依赖：说明：-D：作为开发依赖安装-w：monorepo 环境默认会认为应该将依赖安装到具体的 package中。使用 -w 参数，告诉 pnpm 将依赖安装到 workspace-root，也就是项目的根目录。依赖说明：pnpm 的使用基本和 npm 一致。这里的用法就相当于 npm 中的 npx：意思是，去 node_modules 下的 .bin 目录中找到tsc 命令，并执行它。执行完该命令，会在项目根目录生成一个 tsconfig.json 文件，进行一些配置：我们先在 packages 目录下新建两个模块，分别是 reactivity 响应式模块 和 shared 工具库模块。然后编写构建脚本进行第一次的开发调试。在 packages 下新建 shared 目录，并初始化：然后修改 package.json：注意 name 字段的值，我们使用了一个 @scope 作用域，它相当于 npm 包的命名空间，可以使项目结构更加清晰，也能减少包的重名。编写该模块的入口文件：在packages 下新建 reactivity 目录，并初始化：然后修改 package.json：在浏览器中以 IIFE 格式使用响应式模块时，需要给模块指定一个全局变量名字，通过 buildOptions.name 进行指定，将来打包时会作为配置使用。main 指定的文件支持 commonjs 规范进行导入，也就是说在nodejs 环境中，通过 require 方法导入该模块时，会导入 main 指定的文件。同理，module 指定的是使用 ES Module 规范导入模块时的入口文件。编写该模块的入口文件：在 reactivity 包中用到了另一个包 shared ，需要安装才能使用：意思是，将本地 workspace 内的 @my-vue/shared 包，安装到 @my-vue/reactivity包中去。此时，查看 reactivity 包的依赖信息：在根目录下新建 scripts 目录，存放项目构建的脚本。新建 dev.js，作为开发阶段的构建脚本。使用该脚本，会使用 esbuild 对 packages 下的包进行构建，打包的结果放到各个包的 dist 目录下。在开发阶段，我们默认打包成 IIFE 格式，方便在浏览器中使用 html 文件进行测试。在生产阶段，会分别打包成 CommonJS，ES Module 和 IIFE 的格式。给项目增加一条 scripts 命令：意思是，以 IIFE 的格式，打包 reactivity 模块，打包后的文件可以运行在浏览器中。在终端中执行：输出：PS D:vue3-learn> pnpm dev
> vue3-learn@1.0.0 dev D:vue3-learn
> node scripts/dev.js reactivity -f global
模块信息：
D:vue3-learnpackagesreactivitysrcindex.ts
global
iife
D:demo3vue3-learnpackagesreactivitydistreactivity.global.js
watching …编写一个 html 文件进行测试：打开浏览器控制台：关于“Vu免费云主机域名e3中怎么使用pnpm搭建monorepo开发环境”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue3中怎么使用pnpm搭建monorepo开发环境”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: javascript如何实现表单隔行变色

本篇内容主要讲解“javascript如何实现表单隔行变色”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript如何实现表单隔行变色”吧!效果如下:代码思路:1、用到鼠标经过onmouseover 鼠标…