Javascript 如何将angular 2项目构建/部署到生产环境中？

我用Angular 2创建了一个站点。我开始使用as base创建我的站点，如果我使用命令

npm start

，它就会正常工作。现在站点已经完成，我需要构建/部署（不知道正确的定义）到生产环境，这样站点就可以访问客户端。问题是：我如何为生产构建这个项目？（无需运行

npm安装

）

我能找到的最好的方法是尝试

ngbuild-prod

，但它表明我的项目不是cli项目。如何生成独立文件，只打开

index.html

页面并访问站点？可能吗

更新：

---

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

因此，从我使用Angular2的理解来看，过去几周您基本上创建的是一个客户端单页应用程序，因此您只需要提供HTML页面，并引用相应的JavaScript文件

我一直在研究WebPACK打包一个应用程序（并且仍然在正确的过程中），但是，WebPack会把所有编译过的Type脚本文件组合成一个（或多个，仍然在这部分）JavaScript文件，同时也将JavaScript文件的引用注入到你的索引页。 我当前的项目使用web包配置编译typescript文件（使用gulp），以配置输出javascript文件（main.ts->main.js）：

我的web pack.config.js看起来像（webpack模块忽略了我没有entry.js的事实）：

我最初的代码库是：

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服务器

WebPack背后的思想是，您给它一个入口点（在本例中为main.ts），它对导入语句进行爬网，确保它遇到的任何内容都添加到生成的Javascript文件中，然后自动将它们添加到index.html文件中

---

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

因此，从我使用Angular2的理解来看，过去几周您基本上创建的是一个客户端单页应用程序，因此您只需要提供HTML页面，并引用相应的JavaScript文件

我一直在研究WebPACK打包一个应用程序（并且仍然在正确的过程中），但是，WebPack会把所有编译过的Type脚本文件组合成一个（或多个，仍然在这部分）JavaScript文件，同时也将JavaScript文件的引用注入到你的索引页。 我当前的项目使用web包配置编译typescript文件（使用gulp），以配置输出javascript文件（main.ts->main.js）：

我的web pack.config.js看起来像（webpack模块忽略了我没有entry.js的事实）：

我最初的代码库是：

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服务器

WebPack背后的思想是，您给它一个入口点（在本例中为main.ts），它对导入语句进行爬网，确保它遇到的任何内容都添加到生成的Javascript文件中，然后自动将它们添加到index.html文件中

---

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

我非常不擅长处理webpack，无法使用Anthony Ikeda解决方案或我在web上找到的任何其他解决方案。如果有人像我一样陷入困境，我的解决办法就是使用。我使用angular cli创建一个新项目，使用angular cli创建所有页面、组件和服务，并将代码从旧的no cli项目复制到这个新的cli项目。对于cli项目，我使用

ng build

命令来构建项目并获取要部署的文件。

我非常不擅长处理webpack，无法使用Anthony Ikeda解决方案或我在web上找到的任何其他解决方案。如果有人像我一样陷入困境，我的解决办法就是使用。我使用angular cli创建一个新项目，使用angular cli创建所有页面、组件和服务，并将代码从旧的no cli项目复制到这个新的cli项目。对于cli项目，我使用

ng build

命令来构建项目并获取要部署的文件。

我正在使用此解决方案，它对我来说非常适合（仅html+css+js文件）。。。只有缩小规模才会给我带来一些问题

My webpack.config.js：

/// <binding />
var environment = (process.env.NODE_ENV || "development").trim();

if (environment === "development") {
    module.exports = require('./webpack.dev.js');
} else {
    module.exports = require('./webpack.prod.js');
}

My webpack.prod.js：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
var BabiliPlugin = require("babili-webpack-plugin");

module.exports = {
    entry: {
        "polyfills": "./polyfills.ts",
        "vendor": "./vendor.ts",
        "app": "./app/main.ts"
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    output: {
        path: "./app_build",
        filename: "js/[name]-[hash:8].bundle.min.js"
    },

    module: {
        loaders: [
           {
               loader: "babel-loader",

               // Skip any files outside of your project's `src` directory
               //include: [
               //  "app_build",
               //],
               exclude: [
                 path.resolve(__dirname, "node_modules")
               ],
               // Only run `.js` and `.jsx` files through Babel
               test: /\.js/,

               // Options to configure babel with
               query: {
                   plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
                   presets: ['es2015', 'stage-0'],
               }
           },
           {
               test: /\.ts$/,
               loader: "ts"
           },
           {
               test: /\.html$/,
               loader: "html"
           },
           //{
           //    test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
           //    loader: "file?name=assets/[name]-[hash:6].[ext]",
           //},
           {
               test: /\.(png|jpg|gif|ico)$/,
               //include:  path.resolve(__dirname, "assets/img"),
               loader: 'file?name=assets/img/[name]-[hash:6].[ext]'
           },
           {
               test: /\.(woff|woff2|eot|ttf|svg)$/,
               //  exclude: /node_modules/,
               loader: 'file?name=/assets/fonts/[name].[ext]'
           },
           // Load css files which are required in vendor.ts
           {
               test: /\.css$/,
               loader: "style-loader!css-loader"
           },
           {
               test: /\.scss$/,
               loader: ExtractTextPlugin.extract('css!sass')
           },
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app", "vendor", "polyfills"]
        }),
        new CleanWebpackPlugin(
            [
                "./app_build/js/",
                "./app_build/css/",
                "./app_build/assets/",
                "./app_build/index.html"
            ]
        ),
        // inject in index.html
        new HtmlWebpackPlugin({
            template: "./index.html",
            inject: "body"
        }),
        new BabiliPlugin({ comments: false }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    devServer: {
        historyApiFallback: true,
        stats: "minimal"
    }
};

然后是my package.json（带有为prod构建的命令）：

因此，如果您启动npm start build，它将在我称为app_build的目录中构建prod版本/

---

希望它能帮助你

我正在使用这个解决方案，它非常适合我（只有html+css+js文件）。。。只有缩小规模才会给我带来一些问题

My webpack.config.js：

/// <binding />
var environment = (process.env.NODE_ENV || "development").trim();

if (environment === "development") {
    module.exports = require('./webpack.dev.js');
} else {
    module.exports = require('./webpack.prod.js');
}

My webpack.prod.js：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
var BabiliPlugin = require("babili-webpack-plugin");

module.exports = {
    entry: {
        "polyfills": "./polyfills.ts",
        "vendor": "./vendor.ts",
        "app": "./app/main.ts"
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    output: {
        path: "./app_build",
        filename: "js/[name]-[hash:8].bundle.min.js"
    },

    module: {
        loaders: [
           {
               loader: "babel-loader",

               // Skip any files outside of your project's `src` directory
               //include: [
               //  "app_build",
               //],
               exclude: [
                 path.resolve(__dirname, "node_modules")
               ],
               // Only run `.js` and `.jsx` files through Babel
               test: /\.js/,

               // Options to configure babel with
               query: {
                   plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
                   presets: ['es2015', 'stage-0'],
               }
           },
           {
               test: /\.ts$/,
               loader: "ts"
           },
           {
               test: /\.html$/,
               loader: "html"
           },
           //{
           //    test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
           //    loader: "file?name=assets/[name]-[hash:6].[ext]",
           //},
           {
               test: /\.(png|jpg|gif|ico)$/,
               //include:  path.resolve(__dirname, "assets/img"),
               loader: 'file?name=assets/img/[name]-[hash:6].[ext]'
           },
           {
               test: /\.(woff|woff2|eot|ttf|svg)$/,
               //  exclude: /node_modules/,
               loader: 'file?name=/assets/fonts/[name].[ext]'
           },
           // Load css files which are required in vendor.ts
           {
               test: /\.css$/,
               loader: "style-loader!css-loader"
           },
           {
               test: /\.scss$/,
               loader: ExtractTextPlugin.extract('css!sass')
           },
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app", "vendor", "polyfills"]
        }),
        new CleanWebpackPlugin(
            [
                "./app_build/js/",
                "./app_build/css/",
                "./app_build/assets/",
                "./app_build/index.html"
            ]
        ),
        // inject in index.html
        new HtmlWebpackPlugin({
            template: "./index.html",
            inject: "body"
        }),
        new BabiliPlugin({ comments: false }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    devServer: {
        historyApiFallback: true,
        stats: "minimal"
    }
};

然后是my package.json（带有为prod构建的命令）：

因此，如果您启动npm start build，它将在我称为app_build的目录中构建prod版本/

希望它能帮助您部署dep