8

我正在尝试为具有节点后端服务器的 Angular2 应用程序设置基于 webpack 的流程。经过几个小时的努力,我设法让客户端愉快地构建,但我不知道现在如何集成我的服务器构建。我的服务器使用生成器,因此必须以 ES6 为目标,并且它需要指向不同的类型文件(main.d.ts 而不是 browser.d.ts)..

我的源代码树看起来像;

/
-- client/
-- -- <all my angular2 bits> (*.ts)
-- server/
-- -- <all my node/express bits> (*.ts)
-- webpack.config.js
-- typings/
-- -- browser.d.ts
-- -- main.d.ts

我想也许只是客户端和服务器文件夹中的 tsconfig.json 可以工作,但那里没有运气。我也找不到让 html-webpack-plugin 忽略我的服务器包而不将其注入 index.html 的方法。我当前的 tsconfig 和 webpack 如下,但是有没有人成功让 webpack 捆绑这样的设置?任何指针将不胜感激。

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "declaration": false,
        "removeComments": true,
        "noEmitHelpers": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    },
    "files": [
        "typings/browser.d.ts",
        "client/app.ts",
        "client/bootstrap.ts",
        "client/polyfills.ts"
    ]
}

和我的 webpack.config.js;

var Webpack = require('webpack');
var HtmlWebpackPlugin  = require('html-webpack-plugin');
var Path = require('path');

module.exports = {
  entry: {
    'polyfills': Path.join(__dirname, 'client', 'polyfills.ts'),
    'client': Path.join(__dirname, 'client', 'bootstrap.ts')
  },
  output: {
    path:     Path.join(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.json', '.ts']
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        query: {
          ignoreDiagnostics: [
            2403, // 2403 -> Subsequent variable declarations
            2300, // 2300 -> Duplicate identifier
            2374, // 2374 -> Duplicate number index signature
            2375, // 2375 -> Duplicate string index signature
          ]
        }
      },
      { test: /\.json$/, loader: 'raw' },
      { test: /\.html$/, loader: 'raw' },
      { test: /\.css$/, loader: 'raw!postcss' },
      { test: /\.less$/, loSWE: 'raw!postcss!less' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: 'client/index.html', filename: 'index.html' }),
    new Webpack.optimize.CommonsChunkPlugin('common', 'common.bundle.js')
  ]
};
4

1 回答 1

11

就个人而言,我倾向于用纯 JS 编写服务器端代码(现在大部分 ES2015 在 Node 中可用)和我的 Angular 2 应用程序在 Typescript 中,所以这个问题不会出现。但是,你可以让它与 Webpack 一起工作。

首先,你应该有两个独立的 Webpack 配置:一个用于客户端代码,一个用于服务器端。使用一个配置可能会做到这一点,但即使是这样,它也可能比它的价值更麻烦。确保target: 'node'在您的服务器端配置target: 'web'中进行设置(为客户端自动设置)。并确保entry为服务器端文件设置一个点(我在上面没有看到,但无论如何你最终都会在单独的配置中拥有它)。

其次,您需要有多个 tsconfig 文件。默认情况下,ts-loadertsconfig.json在您的根目录中查找。但是,您可以通过在选项对象或查询字符串/对象中设置来指定另一个文件。configFileName: 'path/to/tsconfig'

然而,这可能会导致另一个问题。您的 IDE 还将tsconfig.json在您的根目录中查找您的文件。如果您有两个单独的文件,您将需要一些方法来告诉您的 IDE 将哪个文件用于任何给定的文件。解决方案将取决于您的 IDE。就个人而言,我使用 Atom with atom-typescript,这很棒,但看起来多个 tsconfig 文件的事情仍在处理中。谢天谢地,我从来不用担心这个问题。

至于这个html-webpack-plugin问题,您不必担心,因为您不会在服务器端配置中包含该插件。但是,仅供参考,您可以传递excludeChunks: ['someChunkName']省略某些块包含在脚本标签中。

于 2016-02-21T19:24:44.970 回答