我可以将 VSCode Typescript 构建任务配置为在构建时将所有非打字稿文件从源复制(并根据需要更新)到 di

Question

我的项目中有两个文件夹，src 我想在其中编写所有代码，dist 我想在构建所有打字稿文件后有一个准备好运行的程序，现在构建后它看起来像这样：

当前项目树的屏幕截图

理想情况下，我希望我的构建任务确保 dist 文件夹是 src 文件夹的 1：1 副本，所有 .ts 文件都替换为新构建的.js文件，并更新所有其他文件，例如.html如果我在构建打字稿时在 src 文件夹中更改它们。

Answer 1

这似乎是一种很常见的情况，但没有"官方推荐"的方法可以做到这一点。(这是一个相关的 GitHub 问题：ms/TS#30835。

您可以使用几个 npm 包来帮助处理文件系统，并使用一些 npm 脚本来定义所需的行为来解决此问题：

包

首先，安装以下软件包：

• rimraf(删除文件)
• copyfiles(复制文件)

npm install copyfiles rimraf

npm 脚本

然后，在package.json中编写一些 npm 脚本，以组合所需的所有行为：

package.json：

{
...
"scripts": {
"prebuild": "rimraf ./dist",
"build": "npm run compile && npm run copy-assets",
"compile": "tsc",
"copy-assets": "copyfiles --all --up 1 --exclude "./**/*.{ts,tsx}" "./src/**/*" ./dist"
},
"dependencies": {
"copyfiles": "^2.4.1",
"rimraf": "^3.0.2",
"typescript": "^4.5.4"
}
...
}

脚本说明：

• prebuild：(这是一个pre脚本，在build脚本之前运行)只是在build脚本运行之前删除dist目录及其内容

• build：运行其他脚本：首先是compile脚本，然后(如果成功)copy-assets脚本

• compile：运行tsc以根据您的tsconfig.json编译您的 TypeScript 项目文件(大概，根据您的屏幕截图，您已将compilerOptions.outDir配置为"dist")

• copy-assets：将所有文件/文件夹从src复制到dist(不包括以.ts和.tsx结尾的文件)。我将逐部分进一步解释这一点：

  • copyfiles：运行命令
  • --all：允许复制所有文件(包括点文件)
  • --up 1：默认情况下，目标目录src将被复制到目标目录dist：相反，这会将所有文件上移一级：所有本来会复制到dist/src/的文件都直接复制到dist/
  • --exclude "./**/*.{ts,tsx}"：一种 glob 模式，用于排除所有以.ts和.tsx结尾的文件
  • "./src/**/*"：目标的 glob 模式：递归复制src中的所有文件
  • ./dist：复制文件的目标目录

用

安装这两个包并添加 npm 脚本后，您需要做的就是运行build脚本来编译 TypeScript 项目并将所有资产文件复制到dist：

npm run build

例：

./src
├── index.html
├── script.ts
├── script2.ts
├── subdir
│   ├── Component.tsx
│   └── data.json
└── texture.png
./dist
├── index.html
├── script.js
├── script2.js
├── subdir
│   ├── Component.js
│   └── data.json
└── texture.png

做！