esbuild配合vscode搭建的ts开发环境，这编译速度，真香

背景

之前一直想搭建一个简洁的ts开发环境，奈何网上大多数文章都是说tsc和ts-node的。

看了各种对比文章，各方对比之后，最终选择了esbuild。

esbuild目前是vite开发环境的底层打包工具，经过了Vue3的检验。另外，它还是nest.js的生产构建工具，目前应该是发展得比较好的Node.JS后端框架了，其原生支持TS的特性，吸引了一大批人。

话不多说，咱们开始吧

开始新建项目

首先，就是安装ts了，这里是全局安装的

npm i typescript -g

安装完成后，就可以使用tsc命令了，比如，查看ts的版本：

tsc -v # 输出 Version 4.9.4

然后，执行下面命令，初始化项目

# 新建一个目录`typescript-esbuild`作为我们项目的根目录
mkdir typescript-esbuild && cd typescript-esbuild

# 初始化tsconfig.json
tsc --init

# 初始化package.json
npm init

# 安装esbuild，--save-exact参数可以固化版本
npm install --save-exact esbuild

# 新建两个目录
# src存放源码，build存放构建后产物
mkdir src build

执行完这一些列操作之后，我们的项目结构如下：

typescript-esbuild
├── build
├── src
├── node_modules
├── package.json 
└── tsconfig.json

添加源码

我们在src目录新建一个文件main.ts，内容如下：

// @file src/main.ts

function test_fn(a:number,b:number):string{
  console.log('fn exec')
  return 'fn red: '+ (a+b)
}

function main():void{
  console.log('start')
  const res = test_fn(3,4)
  console.log(res);
  console.log('end')
  document.write('end 123')
}

main()

这里创建了一个函数test_fn，并在main函数中调用了它，比较简单，仅作为示例使用！

添加构建监听脚本

{
  ...
  "scripts": {
    "watch":"esbuild src/main.ts --outfile=./build/out.js --sourcemap --watch"
  },
  ...
}

esbuild脚本的含义就是编译main.ts，然后输出到./build/out.js文件内。

并且，脚本还添加了--sourcemap来生成源码映射文件和--watch来监听源码的变化。这样一来，只要我们更改了main.ts的内容，./build/out.js就会立马重新生成，非常方便。

配置vscode断点调试

新建文件.vscode/launch.json，输入如下内容：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动调试",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "sourceMaps": true,
            "program": "${workspaceFolder}/src/main.ts",
            "outFiles": [
                "${workspaceFolder}/build/*.js"
            ]
        }
    ]
}

program字段，代表我们的应用入口，这里自然就是main.ts了。

outFiles字段，表示构建后的最终产物。

name字段，则表示我们调试脚本的名称。

看看调试效果

到main.ts文件内打好断点之后，按图操作，启动调试即可：

调试中的效果如下：

可以看到，左侧有一些变量的值，下方的DEBUG CONSOLE面板也输出了对应的内容！

至此，整个搭建结果完成！

懒人开发福利

前面的长篇大论，如果你懒得看，那就直接来下载我建好的这个脚手架工程吧！

typescript-esbuild脚手架工程：https://gitee.com/lizhiqianduan.com/typescript-esbuild-dev

脚手架工程最近还引入了eslint，支持断点调试的同时，还支持了代码静态检测、自动格式化、错误自动修复等功能！

觉得有用，还请点赞收藏！
励志前端，CSDN唯一账号！关注我，带你了解更多前端知识！