如何连接 Angular2 + Webpack + Node + Express？

Question

首先，我已经把它连线并工作了，但我对结果有些不满，感觉它可以改进。

（可以在此处找到当前结果 - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1。）

目录结构为：

C:.
│   .gitignore
│   package.json
│   tsconfig.json
│   tslint.json
│   typings.json
│   webpack.config.js
│
├───dist
│   └───server
│           api.js
│           api.js.map
│           main.js
│           main.js.map
│
└───src
    ├───client
    │       app.component.ts
    │       index.html
    │       main.ts
    │       polyfills.ts
    │       tsconfig.json
    │       vendor.ts
    │
    └───server
            api.ts
            main.ts
            tsconfig.json

现在dist 文件夹只有从./src/server 编译的服务器端文件。它们由 IntelliJ IDEA 放置在那里，因为./src/server/tsconfig.json 要求在保存时进行编译。

客户端捆绑发生在 webpack-dev-server 提供的内存中。 ./src/client/tsconfig.json 不在保存时请求编译。

这里描述了我不喜欢我当前设置的地方 - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1#problems，即：

1. webpack 将处理 ./src/client 下的任何普通 .js 文件 - 它们会自动捆绑并放置在 ./dist/client 下。但是 ./src/server 下的普通 .js 文件呢？我是否需要一个任务运行器（gulp、grunt 等），或者 webpack 中有解决方案吗？
2. 我有三个 tsconfig.json 文件 - ./src/client/tsconfig.json、./src/server/tsconfig.json 和 ./ tsconfig.json。这三个文件共享大部分选项，但不是全部。现在我将它们复制到三个文件中的每一个中 - 不是很好。
3. 此外，由于 typings 文件夹位于根目录下，我必须启动所有顶级 TypeScript 文件（.\src\client\main.ts、.\src\client\polyfills.ts、.\src\client\vendor.ts 和 .\src\server\main.ts） /// <reference path="../../typings/index.d.ts" />。

因此问题：

1. webpack 是否也可以处理服务器端文件，但与客户端文件不同？ IE。 transpile - 是的，复制到 dist - 是的，捆绑 - 不？请记住，我使用的是 webpack-dev-server。
2. 是否可以继承 tsconfig.json 配置，以避免在我拥有的三个文件中重复许多选项？
3. 当文件布局与我的相似时，是否可以避免在顶级 TypeScript 文件中包含 /// <reference path="../../typings/index.d.ts" />？

我知道这是三个问题而不是一个，但我觉得它们都密切相关，一个问题的答案也可能是另一个问题的答案。

Answer 1

1. 我认为您不需要/不希望 webpack 处理服务器端文件。将服务器端文件转译和复制到 /dist 已经由 Typescript 编译器（通过 outDir 配置）处理。由于在 webpack 配置中没有将服务器文件指示为入口点，因此不会捆绑服务器端文件。
2. 目前不可能。但是，看起来有一个问题要跟踪：https://github.com/Microsoft/TypeScript/issues/9876
3. 不确定，在某种程度上与#3 相关（但不是真的）。只要您想让客户端和服务器文件真正分开，我想不会。