使用pnpm搭建monorepo开发环境

简介: 使用pnpm搭建monorepo开发环境

初始化


pnpm init
mkdir packages

配置 monorepo


在根目录新建 pnpm-workspace.yaml 文件; 意思是,将 packages 目录下所有的目录都作为单独的包进行管理。  

packages:
  - 'packages/*'

安装依赖

# 源码采用 typescript 编写
pnpm add  -D -w typescript
# 构建工具,命令行参数解析工具
pnpm add -D -w esbuild rollup rollup-plugin-typescript2 @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-commonjs minimist execa 

说明:


-D:作为开发依赖安装

-w:monorepo 环境默认会认为应该将依赖安装到具体的 package中。使用 -w 参数,告诉 pnpm 将依赖安装到 workspace-root,也就是项目的根目录。

依赖说明:

依赖

描述

typescript

项目使用 typescript 进行开发

esbuild

开发阶段的构建工具

rollup

生产阶段的构建工具

rollup-plugin-typescript2

rollup 编译 ts 的插件

@rollup/plugin-json

rollup 默认采用 esm 方式解析模块,该插件将 json 解析为 esm 供 rollup 处理

@rollup/plugin-node-resolve

rollup 默认采用 esm 方式解析模块,该插件可以解析安装在 node_modules 下的第三方模块

@rollup/plugin-commonjs

将 commonjs 模块 转化为 esm 模块

minimist

解析命令行参数

execa

生产阶段开启子进程

初始化Typescript

pnpm tsc --init

pnpm 的使用基本和 npm 一致。这里的用法就相当于 npm 中的 npx

npx tsc --init

意思是,去 node_modules 下的 .bin 目录中找到tsc 命令,并执行它。

执行完该命令,会在项目根目录生成一个 tsconfig.json 文件,进行一些配置:

{
  "compilerOptions": {
    "outDir": "dist", // 输出的目录
    "sourceMap": true, // 开启 sourcemap
    "target": "es2016", // 转译的目标语法
    "module": "esnext", // 模块格式
    "moduleResolution": "node", // 模块解析方式
    "strict": false, // 关闭严格模式,就能使用 any 了
    "resolveJsonModule": true, // 解析 json 模块
    "esModuleInterop": true, // 允许通过 es6 语法引入 commonjs 模块
    "jsx": "preserve", // jsx 不转义
    "lib": ["esnext", "dom"], // 支持的类库 esnext及dom
    "baseUrl": ".",  // 当前目录,即项目根目录作为基础目录
    "paths": { // 路径别名配置
      "@my-vue/*": ["packages/*/src"]  // 当引入 @my-vue/时,去 packages/*/src中找
    },
  }
}

准备两个模块


shared  在 packages 下新建 shared 目录,并初始化:  

pnpm init

然后修改 package.json:  

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

注意 name 字段的值,我们使用了一个 @scope 作用域,它相当于 npm 包的命名空间,可以使项目结构更加清晰,也能减少包的重名。  


编写这个包的入口文件


// src/index.ts
/**
 * 判断对象
 */
export 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.isArray

reactivity

pnpm init

在packages 下新建 reactivity 目录,并初始化:

{
  "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.ts
import { 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?.name
console.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 ...')
})

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

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


完成第一次调试

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

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


在终端中执行:  


pnpm dev

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

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

到此,一个基本的 monorepo 开发环境就搭建完毕了。  

相关文章
|
5天前
|
存储 缓存 分布式计算
Hello Monorepo(上)
Hello Monorepo(上)
|
5天前
|
数据可视化 JavaScript 前端开发
Hello Monorepo(下)
Hello Monorepo(下)
UMI多环境配置
一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。
1277 0
|
6月前
|
缓存 资源调度 JavaScript
从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级
从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级
237 0
|
5天前
|
存储 缓存 资源调度
链接、包管理工具、polyrepo、monorepo以及Lerna 工具的使用
链接、包管理工具、polyrepo、monorepo以及Lerna 工具的使用
146 0
|
5天前
|
JavaScript 安全 持续交付
Nodejs 第八章(npm搭建私服)
Nodejs 第八章(npm搭建私服)
46 0
|
8月前
|
JavaScript
为老的vueCli项目添加vite支持
为老的vueCli项目添加vite支持
81 0
为老的vueCli项目添加vite支持
|
10月前
|
缓存 前端开发 JavaScript
前端工具Vite的出现解决了什么?
在 ESM 出现之前,Javascript 是没有一个标准的模块方案。 比如说 `CJS` 是用于 Node 服务端的模块化方案,`AMD` 是用于浏览器的模块化方案。为了解决这个模块共用性问题,出现了 `UMD` 用于兼容这两种模块规范。 鉴于上面共用性问题,实际开发中配置的打包方式,采用的还是 UMD 模式。因为这样可以避免打包而产生的规范问题,并且在 ESM 不能使用的情况下也会选择 UMD。
92 0
前端工具Vite的出现解决了什么?
|
10月前
|
前端开发 JavaScript
nrm轻松管理NPM注册表的工具与.npmrc定制化项目的依赖管理
NPM 是前端开发中一个不可或缺的工具,用于管理和安装各种依赖包。但是,有时候我们需要从不同的 NPM 注册表中安装包,例如,从 `npmjs.org`、`淘宝镜像`或`私有注册表`中安装。这时候,一个方便的管理工具就显得非常重要了,而 nrm 就是这样一个工具。
138 0
|
10月前
|
存储 资源调度 安全
pnpm:基础使用
pnpm:基础使用
335 0