Question

我参与了一个项目，我在Angular JS上有多个SPA，都是用打字稿写的。我有以下目录结构：

src/
├── app
│   ├── frontend
│   │   ├── ...
│   │   └── frontend.module.ts
│   ├── backend
│   │   ├── ...
│   │   └── backend.module.ts
├── app.frontend.module.ts
├── app.backend.module.ts

src / 根目录下的文件是每个应用的入口点，它们包含以下代码（此处为前端）：

import * as angular from "angular";
import { FrontendModuleName } from './app/frontend/frontend.module';

angular.module('app', [FrontendModuleName]);
angular.bootstrap(document, ['app'], {
    strictDi: true
});

所以我应该能够告诉Webpack编译＆＃34; src / app.frontend.module.ts ＆＃34;然后编译器跟随导入并且所有内容都很好地合并。

它工作正常，但即使我明确告诉Webpack编译一个单个文件，所有总是被编译。

举个例子，让我们采用这个非常基本的配置：

const path = require('path');

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: {
        frontend: './app.frontend.module.ts',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
    },
    module: {
        loaders:  [
            {
                test: /\.ts(x?)$/,
                loaders: ['ts-loader']
            }
        ]
    }
};

执行此操作将按要求编译 app.frontend.module.ts 但 app.backend.module.ts ！

过了一段时间后，我发现它不是Webpack，而是看起来有问题的Typescript编译器，所以我改变了我的.tsconfig以尝试排除根文件，如下所示：

{
  "compilerOptions": {
      ...
  },
  "exclude": [
    "node_modules",
    "dist",
    "dev",
    "reports",
    "./src/app.*.module.ts"
  ]
}

从某种意义上说它有效，因为它现在忽略了 app.backend.module.ts ，但它仍然试图编译 src中的每个 .ts 文件/ app / backend / 目录！

我现在所处的位置..我已经在compiler options reference中搜索过，但没有找到任何阻止编译器递归编译所有内容的选项。

事实上......

..我发现了一个非常难看的解决方法，我根本不满意。有files选项可用于指定应编译的文件，但我不能给它一个空数组或抛出异常。

所以我在dummy.ts文件夹中创建了一个空的src/文件，它似乎按预期工作：

{
  "compilerOptions": {
      ...
  },
  "files": ["src/dummy.ts"],
  "exclude": [
    "node_modules",
    "dist",
    "dev",
    "reports",
    "./src/app.*.module.ts"
  ]
}

但我无法想象没有更好的办法来解决这个问题。

任何想法都会非常感激。

感谢您的帮助。

Webpack 2不会编译单个打字稿文件

0 个答案: