Grunt 生成新的 node_modules

Question

我正在创建一个 grunt 配置来将我所有的 Typescript 文件编译成 Javascript。我想将所有生成的 Javascript 文件保存在构建文件夹中，但也保持相同的文件夹结构。

示例： src/controllers/myController.ts 将编译为：build/controllers/myController.js

我创建了一个执行此操作的 grunt 配置，但出于某些原因，它还在构建目录中生成了一个 node_modules 文件夹，这会花费很多时间。我的 grunt 配置如下所示：

    module.exports = function(grunt) {
      grunt.config.set('ts', {
        dev: {
          files: [
           {
            src: ['**/*.ts'],
            dest: 'build/'
            }
          ],
          options: {
            target: 'es5',
            fast: 'watch',
            comments: false,
            sourceMap: false,
            failOnTypeErrors: true,
            flatten: false,
            expand: true,
            module: 'system',
            moduleResolution: 'classic'
          }
        }
      });

      grunt.loadNpmTasks('grunt-ts');
    };

有什么方法可以禁用 node_modules 生成过程吗？因为我认为我不需要它们，所以编译过程非常慢。

Answer 1

您的项目中是否有 tsconfig.json 设置？

可能您需要排除那里的 node_modules 目录（参见文档：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html）。

然后您可以在 grunt 配置中使用 tsconfig.json（参见入门部分：https://github.com/TypeStrong/grunt-ts）。

module.exports = function(grunt) { 
  grunt.initConfig({
    ts: {
      default : {
        tsconfig: './tsconfig.json'
      }
  }}); 
  grunt.loadNpmTasks("grunt-ts");
  grunt.registerTask("default", ["ts"]);
};

对应的 tsconfig.json 文件如：

{
"include": [
    "src/**/*.ts*"
],
"exclude": [
    "node_modules"
],
"compilerOptions": {
    "target": "ES5",
    "fast": "watch,
    "sourceMap": false,
    "module": "system",
    "removeComments": true,
    "outDir": "build/",
    "rootDir" ".",
...
}

}

注意： 使用 tsconfig.json 是使用 TypeScript 的最佳方式。

希望这有帮助吗？

Answer 2

以下配置应该可以满足您的要求。它将忽略 node_modules 目录并在生成的 build 目录中重现相同的源目录结构（如 src/ 中所见）：

module.exports = function(grunt) {

  grunt.config.set('ts', {
    dev: {
      options: {
        rootDir: 'src/',
        target: 'es5',
        fast: 'watch',
        comments: false,
        sourceMap: false,
        failOnTypeErrors: true,
        module: 'system',
        moduleResolution: 'classic'
      },
      src: 'src/**/*.ts',
      dest: 'build/'
    }
  });

  grunt.loadNpmTasks('grunt-ts');
};

备注：

rootDir 属性被添加到 options 对象，它的值设置为 'src/'.
flatten: false 和 expand: true 都已从 options 对象中删除。
files 属性已替换为 src 和 dest 属性，其值设置为 src/**/*.ts 和 build/分别.

结果目录结构示例：

目录结构如下：

.
├── src
│   ├── another-folder
│   │   └── quux.ts
│   ├── controllers
│   │   └── myController.ts
│   └── foo.ts
├── Gruntfile.js
├── node_modules
│   └── ...
└── ...

运行后结果如下 $ grunt ts:

.
├── build
│   ├── another-folder
│   │   └── quux.js
│   ├── controllers
│   │   └── myController.js
│   └── foo.js
├── src
│   ├── another-folder
│   │   └── quux.ts
│   ├── controllers
│   │   └── myController.ts
│   └── foo.ts
├── Gruntfile.js
├── node_modules
│   └── ...
└── ...

Grunt 生成新的 node_modules

Grunt generates new node_modules

javascript

node.js

typescript

gruntjs

grunt-ts