多个Angular2应用程序，单个供应商存储库

Question

我想托管各种 Angular2 应用，它们使用相同的框架包和来自根和子域的node_modules：

1. domain.com
2. subdomain.domain.com
3. sub2.domain.com

文件夹结构

public_html 
├── SUBDOMAINS
│   ├── sub2
│   │   ├── assets
│   │   └── src
│   └── subdomain
│       ├── assets
│       └── src
├── assets
├── boot.ts
├── index.html
├── node_modules
├── package.json
├── src
└── tsconfig.json

我希望能够利用 root app 的资源，而不需要重复代码。

Answer 1

执行此操作的一种方法是使用 webpack 和 gulp 。您需要在tsconfig.json中使用 commonjs 作为模块。

• 使用webpack将每个项目的ts文件打包为一个包。
• 在gulp任务的帮助下，您可以将不同的项目分组 目标文件夹。
• 为每个项目目标文件夹创建index.html文件 将您的js/ts个捆绑包作为脚本包含在其中。

• 使用 webpack dev服务器为每个端口侦听不同的端口 项目index.html文件。

  gulp.task("webpack-dev-serverWeb", function(callback) {
  var myConfig = Object.create(webpackConfig);
  new myWebpackDevServer(mywebpack(myConfig), {
      publicPath: "/" + myConfig.output.publicPath,
      stats: {
          colors: true
      }
  }).listen(8080, "localhost", function(err) {
      if (err) throw new gutil.PluginError("webpack-dev-server", err);
      gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/your_path_to_index.html_for_port_8080/index.html");
  });