带有客户端/服务器节点设置的 Webpack? [英] Webpack with a client/server node setup?

问题描述

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

I'm trying to set up a webpack-based flow for an Angular2 app with a node backend server. After many hours banging my head against it, I've managed to get the client to build happily, but I can not figure out how to now integrate my server build. My server uses generators, so must target ES6, and it needs to point to a different typings file (main.d.ts instead of browser.d.ts)..

我的源代码树看起来像；

My source tree looks like;

/
-- 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 捆绑这样的设置?任何指针将不胜感激.

I thought perhaps just a tsconfig.json in the client and server folders would work, but no luck there. I also can't find a way to get html-webpack-plugin to ignore my server bundle and not inject it into index.html. My current tsconfig and webpack are below, but has anyone succeeded in getting webpack to bundle a setup like this? Any pointers would be much appreciated.

{
    "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;

and my 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')
  ]
};

推荐答案

就我个人而言，我倾向于用纯 JS 编写服务器端代码(大多数 ES2015 现在在 Node 中可用)和我的 Angular 2 应用程序在 Typescript 中编写，所以这个问题不出现.但是，您可以将其与 Webpack 一起使用.

Personally, I tend to write my server side code in plain JS (with most of ES2015 available now in Node) and my Angular 2 app in Typescript, so this issue doesn't come up. However, you can get this to work with Webpack.

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

First, you should have two separate Webpack configs: one for your client-side code and one for the server side. It might be possible to do it with one config, but even if it were, it would likely be more trouble than it's worth. Make sure to set target: 'node' in your server-side config (target: 'web' is set automatically for the client side). And make sure you set an entry point for your server-side files (I don't see one above, but you will ultimately have this in a separate config anyway).

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

Second, you need to have multiple tsconfig files. By default, ts-loader will look for tsconfig.json in your root directory. However, you can tell specify another file by setting configFileName: 'path/to/tsconfig' in the options object or query string/object.

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

This may lead to another problem however. Your IDE will also look for your tsconfig.json file in your root directory. If you have two separate files, you will need some way to tell your IDE which one to use for any given file. The solution to this will depend on your IDE. Personally, I use Atom with atom-typescript, which is fantastic, but it looks like the multiple tsconfig files thing is still being worked on. Thankfully I have never had to worry about this problem.

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

As for the html-webpack-plugin issue, you won't have to worry about it since you won't include the plugin in your server-side config. However, just for reference, you can pass excludeChunks: ['someChunkName'] to omit certain chunks from being included in the script tags.

这篇关于带有客户端/服务器节点设置的 Webpack?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！