清理工程和改进构建

清理工程和改进构建

本章内容比较简单，在开始下一步之前，我们更新一下包管理器中某些库的版本。然后改进下构建过程。

对vscode插件构建引入esbuild

esbuild可以更好的控制项目编译，后期引入proto buffer编译也会用到esbuild

esbuild.mjs

在根目录下添加 esbuild.mjs , 将package.json中的 compile,watch脚本从调用tsc修改为调用node esbuild.mjs,内容如下.

"scripts": {
  "install:all": "npm install && cd 
  ...
  "compile": "node esbuild.mjs",
  "watch": "node esbuild.mjs --watch",
  ...
},

esbbuild.mjs是javascript写的脚本，引入esbuild编译typescript代码，核心内容如下

...
import * as esbuild from "esbuild";
...
const watch = process.argv.includes("--watch");
const destDir = "out";

/**
 * @type {import('esbuild').Plugin}
 */
const aliasResolverPlugin = {
	name: "alias-resolver",
    ...
};

const esbuildProblemMatcherPlugin = {
	name: "esbuild-problem-matcher",
    ...
};
...

// Base configuration shared between extension and standalone builds
const baseConfig = {
	bundle: true,
	minify: production,
	sourcemap: !production,
	logLevel: "silent",
	define: buildEnvVars,
	tsconfig: path.resolve(__dirname, "tsconfig.json"),
	plugins: [
        ...
	],
	format: "cjs",
	sourcesContent: false,
	platform: "node"
};

// Extension-specific configuration
const extensionConfig = {
	...baseConfig,
	entryPoints: ["src/extension.ts"],
	outfile: `${destDir}/extension.js`,
	external: ["vscode"],
};

async function main() {
	const config = extensionConfig;
	const extensionCtx = await esbuild.context(config);
	if (watch) {
		await extensionCtx.watch();
	} else {
		await extensionCtx.rebuild();
		await extensionCtx.dispose();
	}
}
...

上边代码有个main函数，供node调用，esbuild读取config(typescript部分配置从tsconfig.json中获取)进行编译。命令行参数--watch控制是否是watch模式。

对react项目引入react-swc

更好的性能

webview-ui/package.json 将"@vitejs/plugin-react"替换成"@vitejs/plugin-react-swc"

{
  ...
  "devDependencies": {
    ...
	"@vitejs/plugin-react-swc": "^3.5.0",
  }
}

同时更新vite.conig.ts如下

...
import react from "@vitejs/plugin-react-swc";
...

更改项目名称和更新库版本

将项目名称和描述

总结

具体可以查看minicline项目的git commit获取具体改动。