我正在尝试为具有节点后端服务器的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')
]
};
答案 0 :(得分:10)
就个人而言,我倾向于在普通JS中编写我的服务器端代码(大部分ES2015现在在Node中可用)和我在Textcript中的Angular 2应用程序,所以这个问题没有出现。但是,您可以使用Webpack。
首先,您应该有两个单独的Webpack配置:一个用于客户端代码,另一个用于服务器端。有可能用一个配置来做,但即使它是,它可能会比它的价值更麻烦。确保在服务器端配置中设置target: 'node'
(为客户端自动设置target: 'web'
)。并确保为服务器端文件设置了entry
点(我上面没有看到,但最终你会在单独的配置中找到它。)
其次,您需要拥有多个tsconfig文件。默认情况下,ts-loader
会在根目录中查找tsconfig.json
。但是,you can tell specify another file通过在选项对象或查询字符串/对象中设置configFileName: 'path/to/tsconfig'
。
然而,这可能会导致另一个问题。您的IDE还将在根目录中查找您的tsconfig.json
文件。如果您有两个单独的文件,则需要某种方法告诉IDE哪个文件用于任何给定文件。解决方案取决于您的IDE。就个人而言,我使用Atom与atom-typescript
,这太棒了,但看起来多个tsconfig文件的东西是still being worked on。谢天谢地,我从来没有担心过这个问题。
对于html-webpack-plugin
问题,您不必担心它,因为您不会在服务器端配置中包含该插件。但是,仅供参考,您可以将excludeChunks: ['someChunkName']
传递给omit certain chunks,使其不会包含在脚本代码中。