我可以配置 VSCode Typescript 构建任务以在构建时将所有非 Typescript 文件从源复制（并根据需要更新）到 dist 文件夹吗？

Question

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

当前项目树的屏幕截图

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

Answer 1

这似乎是一个很常见的情况，但没有“官方推荐”的方法来做到这一点。（这是相关的 GitHub 问题：ms/TS#30835。）

\n

您可以使用几个 npm 包来帮助进行文件系统操作，并使用一些 npm 脚本来定义您想要的行为来解决此问题：

\n

套餐

\n

首先，安装这些软件包：

\n

\n
• rimraf（删除文件）
\n
• copyfiles（复制文件）
\n

\n

npm install copyfiles rimraf\n

\n

npm 脚本

\n

然后，在您的文件中编写一些 npm 脚本package.json来组合您想要的所有行为：

\n

package.json:

\n

npm install copyfiles rimraf\n

\n

脚本说明：

\n

\n

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

  \n
\n

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

  \n
\n

• compiletsc：根据您的运行来编译您的 TypeScript 项目文件tsconfig.json（大概，根据您的屏幕截图，您已配置compilerOptions.outDir为"dist"）

  \n
\n

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

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

\n

使用

\n

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

\n

npm run build\n

\n

例子：

\n

./src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 script.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 script2.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 subdir\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Component.tsx\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 data.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 texture.png\n\n./dist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 script.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 script2.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 subdir\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Component.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 data.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 texture.png\n

\n

完毕！

\n