如何从以前的 typescript(.ts) 文件中删除已编译的 JS 文件？

Question

我正在关注Angular 2 quick start 教程。以下是我的文件夹结构 -

├── gulpfile.js
├── index.html
├── js
|   ├── app.component.js
|   └── boot.js
├── source
|   ├── app.component.ts
|   └── boot.ts
├── node_modules
    ├── module 1
    └── module 2

我的打字稿文件位于source/ 目录中。我正在将它编译到js/ 目录。我正在使用 gulp-typescript。

问题是，例如，当我将文件boot.ts 重命名为bootstrap.ts 并再次编译时，会创建相应的bootstrap.js 文件，但旧的boot.js 文件仍保留在js/ 目录中。

现在文件夹结构如下-

├── gulpfile.js
├── index.html
├── js
|   ├── app.component.js
|   └── bootstrap.js
|   └── boot.js
├── source
|   ├── app.component.ts
|   └── bootstrap.ts
├── node_modules
    ├── module 1
    └── module 2

我想通过 gulp 任务自动删除这个boot.js。如何做到这一点？

Answer 1

安装 gulp del。

$ npm install --save-dev gulp del

创建任务。

var gulp = require('gulp');
var del = require('del');

gulp.task('clean:output', function () {
  return del([
    'js/'
  ]);
});

gulp.task('default', ['clean:output']);

您可以在 gulp del here 上找到更多信息。

Answer 2

我来到这里是看到标题，并且将 gulp 添加到混合中并不是一个解决方案。所以这就是我解决它的方法。

在你的 npm 构建脚本前加上 rm -rf ./js/ &&

"scripts": {
    ...
    "build": "rm -rf ./js/ && tsc",
    ...
},

rm -rf ./js/ forcefully删除r./js/doku rm in bash下的所有文件和目录

&&表示如果成功执行下一条命令&& in bash

Answer 3

使用最新的 tsc，您应该可以使用以下命令进行清理

tsc --build --clean

我目前的 tsc 版本供你参考

$ tsc --version
Version 3.5.3

请注意，--clean 标志是 project-references 的一部分，并且仅适用于它。

Answer 4

我使用来自here 的脚本。

在 package.json 添加脚本：

"build": "node jsDelete.js && npx tsc -w"

并添加jsDelete.js：

const fs = require('fs');
const Path = require('path');

const deleteFolderRecursive = function(path) {
  if (fs.existsSync(path)) {
    fs.readdirSync(path).forEach((file, index) => {
      const curPath = Path.join(path, file);
      if (fs.lstatSync(curPath).isDirectory()) { // recurse
        deleteFolderRecursive(curPath);
      } else { // delete file
        fs.unlinkSync(curPath);
      }
    });
    fs.rmdirSync(path);
  }
};

deleteFolderRecursive('path_to_folder')

Answer 5

此解决方案的灵感来自 @Akash Kurian Jose's answer。由于他的解决方案取决于您使用的操作系统，因此我添加了这个适用于任何操作系统的解决方案：

将rimraf 添加为开发依赖项：

"devDependencies": {
   "rimraf": "^3.0.1"
}

然后将这 3 个脚本添加到您的 package.json 中：

"rimraf": "./node_modules/rimraf/bin.js",
"clean" : "rimraf js/",
"compile": "npm run clean && tsc -p ./"

当执行npm run compile 时，js/ 文件夹将在编译前被清理。

Answer 6

此解决方案是对GabrielBB 解决方案的改进。

安装 rimraf npm i rimraf -D

添加以下 npm 脚本

"clean": "rimraf js/",
"prebuild": "npm run clean",
"build": "tsc",

这利用了 npms 自动 Pre scripts

Answer 7

如果有人会遇到这个问题： 我试图使用tsc --build --clean 但有时如果你重命名了很多 .ts 文件，这个命令在 mac 上运行：

如果您重命名了很多 .ts 文件，则删除 .js 文件（适用于 Mac 用户）：

find . -name '*.js' ! -path './node_modules/*' -delete

如果 declaration: true 在您的 tsconfig 文件中，您可能希望：

find . -name '*.d.ts' ! -path './node_modules/*' -delete

删除文件前别忘了git commit

Answer 8

使用 Git 和 Bash 破解

git add . && git stash &&  find . \\( -name '*.js' -o -name '*.js.map' \\) ! -path './node_modules/*' -delete  && git restore . && git stash pop

Answer 9

您可以运行：tsc -b YOUR_ENTRYPOINT_LIST --clean，如上所述 here。

示例：

tsc -b src test --clean 会根据src 和test 各自的tsconfig.json 目录构建它们，然后清理（删除）生成的.js 文件。

您可以拥有一个主 tsconfig.json，并在每个子文件夹配置文件中简单地使用 {extend: "path_to_main_tsconfig"}。

建议：

在运行这个命令之前，用--dry试试看会发生什么。