monorepo 发布库 --- 打包文件

目录

esm & cjs

使用 tsup 进行打包

安装使用

多个入口点

捆绑格式

监视模式

生成声明文件

设置构建脚本

设置 dev 脚本

使用合适的工具，从 monorepo 发布包到 npm 注册表可以是一个顺畅的体验。

虽然本指南无法解决稳健包所需的所有可能的编译、打包和发布配置，但它将解释一些基础知识。

如果你想将 monorepo 的一些包发布到 npm，你应该遵循此设置。 如果你不需要发布到 npm，你应该使用内部代替。 它们更容易设置和使用。

esm & cjs

与内部包不同，外部包可以部署到 npm并且在本地使用。 在本指南中，我们将把一个包打包成 ECMAScript 模块 (esm) 和 CommonJS 模块 (cjs) 两种格式，它们是 npm 上最常用的格式。

• ESM： 浏览器项目、新 Node.js 项目、需要 Tree Shaking 的前端工程。

• CJS： 旧 Node.js 项目、未支持 ESM 的 npm 包。

使用 tsup 进行打包

tsup 是一个基于 ESBuild 实现在零配置的情况下快速打包 Typescript 模块的库，支持 .ts、.tsx的转换。它基于esbuild，但是同时也选择融合其他的构建工具共同参与，弥补了esbuild的不足。

安装使用

# pnpm 安装 同样也可以npm yarn 等
pnpm add tsup -D

packages.json 文件中声明

{"build":"tsup"
}

简单使用可以在命令后面加输出路径等 也可以添加配置文件去使用

文件被写入./dist 您可以一次捆绑多个文件：这将输出dist/index.js和dist/cli.js。

{"build":"tsup src/index.ts src/cli.ts"
}

也可以使用配置文件，根目录下面新建一个 tsup.config.ts 文件

import { defineConfig } from 'tsup'export default defineConfig({entry: ['./src/index.ts'], // 打包入口splitting: false,sourcemap: true,clean: true,
})

您还可以使用标志指定自定义文件名--config，或传递--no-config以禁用配置文件。 

"scripts": {"build": "tsup --format esm,cjs,iife --config tsup.config.ts"
},

多个入口点

除了使用位置参数tsup [...files]指定多个入口点之外，还可以使用 cli 标志--entry：

# Outputs `dist/a.js` and `dist/b.js`.
tsup --entry src/a.ts --entry src/b.ts

相关的输出文件名可以定义如下：

# Outputs `dist/foo.js` and `dist/bar.js`.
tsup --entry.foo src/a.ts --entry.bar src/b.ts

它相当于以下内容tsup.config.ts：

export default defineConfig({// Outputs `dist/a.js` and `dist/b.js`.entry: ['src/a.ts', 'src/b.ts'],// Outputs `dist/foo.js` and `dist/bar.js`entry: {foo: 'src/a.ts',bar: 'src/b.ts',},
})

捆绑格式

支持的格式：esm、、cjs（默认）和iife。

您可以一次性捆绑多种格式：

tsup src/index.ts --format esm,cjs,iife

这将输出以下文件夹结构中的文件：

dist
├── index.mjs         # esm
├── index.global.js   # iife
└── index.js          # cjs

如果type您的字段package.json设置为module，文件名会略有不同：

dist
├── index.js          # esm
├── index.global.js   # iife
└── index.cjs         # cjs

阅读有关esmNode.js 中的支持的更多信息。

如果您不想要像.mjs或这样的扩展.cjs，例如您希望您的库在不支持这些扩展的捆绑器（或环境）中使用，您可以启用--legacy-output标志：

tsup src/index.ts --format esm,cjs,iife --legacy-output

..输出为：

dist
├── esm
│   └── index.js
├── iife
│   └── index.js
└── index.js

监视模式

tsup src/index.ts --watch

开启监视模式。这意味着在初始构建之后，tsup 将继续监视任何已解析文件中的更改。

tsup src/index.ts --watch --ignore-watch ignore-this-folder-too

tsup index.ts --dts

{"scripts": {"build": "tsup src/index.ts --format cjs,esm --dts"}
}

{"tasks": {"build": {"outputs": ["dist/**"]}}
}

{"main": "./dist/index.js", #cjs"module": "./dist/index.mjs", #esm"types": "./dist/index.d.ts" #d.ts
}

{"tasks": {"build": {"dependsOn": ["^build"]}}
}

现在，我们可以运行 turbo run build，它会自动在构建我们的应用程序之前构建我们的包。

设置 dev 脚本

我们的设置存在一个小问题。 我们构建我们的包很好，但它在开发中效果不佳。 我们对 @repo/math 包所做的更改没有反映在我们的应用程序中。

那是因为我们没有一个 dev 脚本来在我们工作时重建我们的包。 我们可以轻松添加一个

{"scripts": {"build": "tsup src/index.ts --format cjs,esm --dts","dev": "tsup src/index.ts --format cjs,esm --dts --watch"}
}

作者没有用ts可以这样 去掉 dts选项

  "scripts": {"build": "tsup src/index.js src/platform.js --format cjs,esm","dev": "tsup src/index.js src/platform.js --format cjs,esm  --watch"},

这会将 --watch 标志传递给 tsup，这意味着它将监视文件更改。

如果我们在 turbo.json 中已经设置了dev 脚本，运行 turbo run dev 将并行运行我们的 packages/math dev 任务和我们的 apps/web dev 任务。