node.js - 如何连接 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、< strong>.\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. 是否可以避免包含 /// <reference path="../../typings/index.d.ts" />当文件布局与我的相似时，在顶级 TypeScript 文件中？

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

Answer 1

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