javascript - 如何构建/部署 Angular 2 项目到生产环境？

Question

我已经使用 Angular 2 创建了一个网站。我开始使用 Angular 2 QuickStart Guide 制作我的网站作为基础，如果我使用命令 npm start ，它就会正常工作。现在网站已经完成，我需要构建/部署(不知道正确的定义)到生产环境，以便客户端可以访问该网站。问题是:如何构建这个生产项目？ (无需运行npm install)

我能找到的最好的办法是尝试 ng build -prod，但它说我的项目不是 cli 项目。如何生成独立文件以仅打开 index.html 页面并访问该网站？可能吗？

更新:

也许我并不清楚:我正在寻找的是一种获取所有 TypeScripts 文件并将其构建在准备显示的纯 HTML/JavaScript/CSS 站点中的方法。目前不需要压缩或缩小。是否可以？如果没有，还有什么其他解决方案(最好独立于主机)？

Answer 1

因此，根据我在过去几周使用 Angular2 的了解，您本质上创建的是一个客户端单页应用程序，因此您需要提供的只是包含对相应 JavaScript 文件的引用的 HTML 页面。

我一直在研究 WebPack 来打包应用程序(并且仍在正确的过程中)，但是，WebPack 会将所有已编译的 typescript 文件组合成一个(或多个，仍在处理这部分)Javascript 文件同时还将对 javascript 文件的引用注入(inject)到您的 index.html 页面中。

我当前的项目使用 web pack 配置来编译 typescript 文件(使用 gulp)来配置输出 javascript 文件(main.ts -> main.js):

gulp.task("build-tsc", function() {
    return gulp.src("entry.js")
        .pipe(webpack( require("../../../webpack.config.js")))
        .pipe(gulp.dest(config.dist));
});

我的 web pack.config.js 看起来像(webpack 模块忽略了我没有 entry.js 的事实):

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

module.exports = {
  entry: {
    "main": "./src/app/main.ts",
    "share": "./src/app/share_main.ts",
    "polyfills": "./src/app/polyfills.ts"
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['main', 'share', 'polyfills']
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

我原来的代码库是:

src/
    index.html
    assets/
        styles/
            main.scss
    app/
        app.component.ts
        app.routes.ts
        app.module.ts
        share_main.ts
        polyfills.ts
        dashboard/
            dashboard.component.ts
            dashboard.html
        navbar/
            navbar.component.ts
            navbar.html

所以我最终得到的(构建后)是一个新的 dist/目录，其中包含可供使用的文件:

dist/
    index.html
    main.js
    share.js
    polyfill.js
    app/
        dashboard/
            dashboard.html
        navbar/
            navbar.html
    styles/
        main.css

现在我正在使用 browserSync 来为开发目的提供文件，但理论上您应该能够通过 NGINX、Apache 将它们作为静态内容提供，或者通过 NGINX/Apache 将它们代理到 lite-server。

WebPack 背后的想法是，您给它一个入口点(在本例中为 main.ts)，它会抓取导入语句，确保将遇到的任何内容添加到生成的 Javascript 文件中，然后将它们添加到 index.html 文件中自动。

就像我提到的，我有一个工作应用程序，但我试图更好地理解“多个入口点”，但上面的内容应该是一样的。