如何搭建环境(软件开发环境搭建)

湘潭网小编为大家带来以下内容：

这篇文章主要介绍了Vue3中怎么使用pnpm搭建monorepo开发环境的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3中怎么使用pnpm搭建monorepo开发环境文章都会有所收获，下面我们一起来看看吧。Pnpm 和 Monorepo

Pnpm 是新一代的 nodejs 包管理工具。第一个 “P”意为 Performance，代表着更佳的性能。

它的主要优点有两个，一是采用了 hard-link 机制，避免了包的重复安装，节省了空间，同时能提高项目依赖的安装速度。二是对monorepo 的支持非常友好，只需要一条配置就能实现。

Monorepo 是一种新的仓库管理方式。过去的项目，大多采用一个仓库维护一个项目的方案。对于一个庞大复杂的项目，哪怕只进行一处小小的修改，影响的也是整体。而采用 monorepo 的形式，我们可以在一个仓库中管理多个包。每个包都可以单独发布和使用，就好像是一个仓库中又有若干个小仓库。

Vue3 源码采用 monorepo 方式进行管理，将众多模块拆分到 packages 目录中。

这带来的最直观的好处，就是方便管理和维护。而且，它不像 Vue2 那样将源码整体打包对外暴露。Vue3的这种组织形式，方便的实现了 Tree-shaking，需要哪个功能就引入对应的模块，能大大减少打包后项目的体积。

搭建开发环境创建项目

首先全局安装 pnpm：

npm install -g pnpm

新建一个目录并进行初始化：

mkdir vue3-learncd vue3-learnpnpm initmkdir packages配置 monorepo

在项目根目录下新建 pnpm-workspace.yaml 文件：

packages:  - 'packagessrc"]  // 当引入 @my-vue/时，去 packagesexport const isObject = (value) =>{    return typeof value === 'object' && value !== null}export const isFunction= (value) =>{    return typeof value === 'function'}export const isString = (value) => {    return typeof value === 'string'}export const isNumber =(value)=>{    return typeof value === 'number'}export const isArray = Array.isArrayreactivity

在packages 下新建 reactivity 目录，并初始化：

pnpm init

然后修改 package.json：

{  "name": "@my-vue/reactivity",  "version": "1.0.0",  "description": "@my-vue/reactivity",  "main": "dist/reactivity.cjs.js",  "module": "dist/reactivity.esm-bundler.js",  "buildOptions": {    "name": "VueReactivity"  }}

在浏览器中以 IIFE 格式使用响应式模块时，需要给模块指定一个全局变量名字，通过 buildOptions.name 进行指定，将来打包时会作为配置使用。

main 指定的文件支持 commonjs 规范进行导入，也就是说在nodejs 环境中，通过 require 方法导入该模块时，会导入 main 指定的文件。

同理，module 指定的是使用 ES Module 规范导入模块时的入口文件。

编写该模块的入口文件：

// src/index.tsimport { isObject } from '@my-vue/shared'const obj = {name: 'Vue3'}console.log(isObject(obj))

在 reactivity 包中用到了另一个包 shared ，需要安装才能使用：

pnpm add @my-vue/shared@workspace --filter @my-vue/reactivity

意思是，将本地 workspace 内的 @my-vue/shared 包，安装到 @my-vue/reactivity包中去。

此时，查看 reactivity 包的依赖信息：

"dependencies": {   "@my-vue/shared": "workspace:^1.0.0"}编写构建脚本

在根目录下新建 scripts 目录，存放项目构建的脚本。

新建 dev.js，作为开发阶段的构建脚本。

// scripts/dev.js// 使用 minimist 解析命令行参数const args = require('minimist')(process.argv.slice(2))const path = require('path')// 使用 esbuild 作为构建工具const { build } = require('esbuild')// 需要打包的模块。默认打包 reactivity 模块const target = args._[0] || 'reactivity'// 打包的格式。默认为 global，即打包成 IIFE 格式，在浏览器中使用const format = args.f || 'global'// 打包的入口文件。每个模块的 src/index.ts 作为该模块的入口文件const entry = path.resolve(__dirname, `../packages/${target}/src/index.ts`)// 打包文件的输出格式const outputFormat = format.startsWith('global') ? 'iife' : format === 'cjs' ? 'cjs' : 'esm'// 文件输出路径。输出到模块目录下的 dist 目录下，并以各自的模块规范为后缀名作为区分const outfile = path.resolve(__dirname, `../packages/${target}/dist/${target}.${format}.js`)// 读取模块的 package.json，它包含了一些打包时需要用到的配置信息const pkg = require(path.resolve(__dirname, `../packages/${target}/package.json`))// buildOptions.name 是模块打包为 IIFE 格式时的全局变量名字const pgkGlobalName = pkg?.buildOptions?.nameconsole.log('模块信息：n', entry, 'n', format, 'n', outputFormat, 'n', outfile)// 使用 esbuild 打包build({  // 打包入口文件，是一个数组或者对象  entryPoints: [entry],   // 输入文件路径  outfile,   // 将依赖的文件递归的打包到一个文件中，默认不会进行打包  bundle: true,   // 开启 sourceMap  sourcemap: true,  // 打包文件的输出格式，值有三种：iife、cjs 和 esm  format: outputFormat,   // 如果输出格式为 IIFE，需要为其指定一个全局变量名字  globalName: pgkGlobalName,   // 默认情况下，esbuild 构建会生成用于浏览器的代码。如果打包的文件是在 node 环境运行，需要将平台设置为node  platform: format === 'cjs' ? 'node' : 'browser',  // 监听文件变化，进行重新构建  watch: {   onRebuild (error, result) {       if (error) {           console.error('build 失败：', error)       } else {           console.log('build 成功:', result)        }    }  }}).then(() => {  console.log('watching ...')})

使用该脚本，会使用 esbuild 对 packages 下的包进行构建，打包的结果放到各个包的 dist 目录下。

在开发阶段，我们默认打包成 IIFE 格式，方便在浏览器中使用 html 文件进行测试。在生产阶段，会分别打包成 CommonJS，ES Module 和 IIFE 的格式。

完成第一次调试

给项目增加一条 scripts 命令：

// package.json"scripts": {    "dev": "node scripts/dev.js reactivity -f global"}

意思是，以 IIFE 的格式，打包 reactivity 模块，打包后的文件可以运行在浏览器中。

在终端中执行：

pnpm dev

输出：

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.jswatching ...

编写一个 html 文件进行测试：

// packages/reactivity/test/index.html<body>    <div id="app"></div>    <script src="../dist/reactivity.global.js"></script></body>

打开浏览器控制台：

关于“Vue3中怎么使用pnpm搭建monorepo开发环境”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue3中怎么使用pnpm搭建monorepo开发环境”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注花开半夏行业资讯频道。

君子莲(www.junzilian.com)湖南省长沙、株洲、湘潭城市宣传信息网，提供房产,人才招聘,家居装饰,教育,论坛,旅游,特产,美食,天气,娱乐,企业等资讯。