我已經創建了一個使用Angular 2的站點。我開始使用Angular 2 QuickStart Guide作爲基礎製作我的站點，並且它的工作方式應該如果我使用命令npm start。現在，該網站已完成，我需要建立/部署（不知道正確的定義）到生產，所以該網站可以訪問客戶端。問題是：如何構建生產項目？ （不需要運行npm install）如何構建/部署角度2項目到生產？
我能找到的最好的事情就是嘗試ng build -prod，但它說我的項目不是cli項目。如何生成一個獨立的文件來打開index.html頁面並訪問該網站？可能嗎？
更新：
也許我並不清楚：我正在尋找一種方式讓所有的打字稿文件，並在純HTML/JavaScript的/ CSS網站準備顯示建造它。目前不需要壓縮或縮小。可能嗎？如果不是，還有什麼其他解決方案（最好是獨立於主機）？
我在處理webpack方面非常糟糕，無法使用Anthony Ikeda解決方案或我在網上找到的任何其他解決方案。如果有人像我一樣陷入這種困境，我的解決方案是使用Angular Cli。我使用angular cli創建了一個新項目，使用角度cli創建所有頁面，組件和服務，並將舊no-cli項目的代碼複製到此新cli項目中。通過cli項目，我使用ng build命令來構建項目並獲取要部署的文件。
所以從我從使用Angular2的過程中瞭解到，最基本的創建是一個客戶端單頁面應用程序，所以您需要提供的是HTML頁面，其中包含對各個JavaScript文件的引用。
我一直在研究WebPack打包應用程序（但仍然處於正確的位置），但是，WebPack將所有編譯後的打字稿文件合併爲一個（或多個，仍然在這部分工作）Javascript同時也將JavaScript文件的引用注入到index.html頁面中。
我目前的項目編譯使用Web包配置配置輸出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自動文件。
就像我剛纔提到的，我有一個工作的應用程序，但我試圖更好地理解「多入口點」，但上面應該工作得一樣。
剛剛認識到，build-tsc gulp任務只是協調創建dist /目錄的工作的一項任務。 –
謝謝。我會看你的答案。我想要做的是創建靜態文件，可以打開像一個正常的網站沒有角度。 – user2748531
你是指「沒有角度」？ –
我正在使用這個解決方案，它對我來說是完美的（只有html + css + js文件）...只有縮小給我一些問題。
我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');
}
我webpack.dev.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');
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.js"
},
devtool: 'source-map',
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 webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
devServer: {
//contentBase: path.resolve(__dirname, "app_build/"),
historyApiFallback: true,
stats: "minimal"
}
};
我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"
}
};
，然後我的包。 json（用命令來構建產品）：
{
"name": "dipendentistatali",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "tsc && npm install && npm run build",
"watch": "SET NODE_ENV=development && webpack --watch --color",
"test": "webpack-dev-server --inline --hot",
"build": "SET NODE_ENV=development && webpack -d --color",
"buildProduction": "SET NODE_ENV=production && webpack -d --color",
"lint": "tslint ./app/**/*.ts -t verbose",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"keywords": [],
"author": "",
"dependencies": {
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.15",
"angular2-cool-http": "^1.2.3",
"angular2-toaster": "^1.0.1",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"jquery": "2.2.4",
"ng2-bs3-modal": "^0.10.4",
"ng2-modal": "0.0.22",
"ng2-resource-rest": "^1.5.3",
"ng2-slim-loading-bar": "^2.0.4",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"clean-webpack-plugin": "0.1.10",
"concurrently": "^2.2.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"lite-server": "^2.2.2",
"lodash": "^4.11.1",
"node-sass": "^3.13.0",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"webpack-merge": "^0.9.0",
"webpack-stream": "^3.2.0"
}
}
因此，如果您啓動NPM開始建立它建立在一個目錄下，我叫app_build督促版/
希望它可以幫助你
部署取決於你的籌碼，服務器，運營團隊，以及一百萬其他因素。我們可以告訴你的任何事情都將是純粹的意見，這是SO的主題。 – ssube
我正在尋找如何生成獨立文件，以便我可以打開索引並像純html/js/css網站一樣打開網站。我認爲這是可能的，但似乎是不可能的。 – user2748531