构建与打包工具链

一些例子

Obsidian插件

在Obsidian插件的构建系统中，一般使用的是esbuild，默认并不支持 svelte、vue 等组件的使用。其原依赖：

# 相关依赖
    "@types/node": "^16.11.6",
    "@typescript-eslint/eslint-plugin": "5.29.0",
    "@typescript-eslint/parser": "5.29.0",
    "builtin-modules": "3.3.0",
    "esbuild": "^0.14.47",
    "obsidian": "latest",
    "tslib": "2.4.0",
    "typescript": "4.7.4",
    "vite": "^4.1.1"

令其支持 svelte：

npm install --save-dev
	svelte				# svelte组件本体
	svelte-preprocess
	@tsconfig/svelte
	esbuild-svelte		# 让esbuild构建svelte

令其支持 vue：

# 相关依赖
	"vue": "^3.2.31"							# vue组件本体
	"@the_tree/esbuild-plugin-vue3": "^0.3.1",	# 让esbuild构建
    # "esbuild-sass-plugin": "^3.3.1",

但vue我踩坑了：scss样式类型不生效，https://github.com/pipe01/esbuild-plugin-vue3/issues/30

其他构建方法

ts有很多编译工具，如 tsc、tsest、tsup、rollup、vite、webpack 等，我该如何选择？

TypeScript 构建工具对比

构建工具	主要特点	适用场景	配置文件
vite	基于原生 ESM 的开发服务器，热模块替换极快 底层使用 rollup 进行打包	Vue、React 等前端框架项目，快速开发体验	vite.config.js
rollup	模块打包器，擅长库的打包	打包库，生成高质量的模块	rollup.config.js
tsup	支持 TypeScript 底层使用 esbuild 进行打包	快速打包，生成现代化 JavaScript	tsup.config.ts
webpack	以前的VueCLI底层使用Webpack		webpack.config.js
tsc	TypeScript 官方编译器，功能基础，速度较快	小型项目，快速编译	tsconfig.json
ts-jest	Jest 的 TypeScript 版本，用于测试	TypeScript 项目的单元测试
vitest

• rollup中文文档：https://www.rollupjs.com/