把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?
请在回答中包含Angular版本,以便我们在它转移到后续版本时更好地跟踪。
把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?
请在回答中包含Angular版本,以便我们在它转移到后续版本时更好地跟踪。
当前回答
使用SystemJs生成器和gulp的Angular 2生产工作流
角。IO有快速入门教程。我复制了本教程,并扩展了一些简单的gulp任务,将所有内容捆绑到dist文件夹,可以复制到服务器并像那样工作。我尝试优化所有内容,以便在Jenkis CI上正常工作,因此node_modules可以被缓存,不需要复制。
源代码与示例应用程序在Github: https://github.com/Anjmao/angular2-production-workflow
Steps to production清洁打字文件编译js文件和dist文件夹 在app文件夹内编译typescript文件 使用SystemJs捆绑器将所有内容捆绑到dist文件夹,并生成哈希值,以便浏览器缓存刷新 使用gulp-html-replace将index.html脚本替换为捆绑版本并复制到dist文件夹 复制资产文件夹内的所有内容到dist文件夹
Node:虽然你总是可以创建自己的构建过程,但我强烈建议使用angular-cli,因为它有所有需要的工作流,现在它工作得很完美。我们已经在生产环境中使用它了,在使用angular-cli时没有任何问题。
其他回答
Ng服务的工作是为我们的应用程序的开发目的服务。生产方面呢?如果我们看看我们的包装。Json文件,我们可以看到有我们可以使用的脚本:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
构建脚本使用Angular CLI的ng build,并带有——prod标志。我们现在试试。我们有两种方法:
#使用NPM脚本
npm run build
#直接使用cli
ng build --prod
这次我们得到了四个文件而不是五个。——prod标志告诉Angular把我们的应用缩小很多。
“最佳”取决于场景。有时你只关心最小的单个包,但在大型应用程序中,你可能不得不考虑延迟加载。在某种程度上,将整个应用程序作为一个单一的bundle提供是不切实际的。
在后一种情况下,Webpack通常是最好的方法,因为它支持代码分割。
对于单个包,我会考虑Rollup,或者Closure编译器,如果你有勇气的话:-)
我已经在这里创建了我使用过的所有Angular捆绑器的示例:http://www.syntaxsuccess.com/viewarticle/angular-production-builds
代码可以在这里找到:https://github.com/thelgevold/angular-2-samples
Angular版本:4.1.x
带Webpack的Angular 2(不需要CLI设置)
1- Angular2团队的教程
Angular2团队发布了一个使用Webpack的教程
我将教程中的文件创建并放置在一个小型GitHub种子项目中。因此,您可以快速地尝试工作流。
产品说明:
npm安装 npm的开始。为发展。这将创建一个虚拟“dist”文件夹,该文件夹将被重载到您的本地主机地址。 NPM运行构建。用于生产。这将创建一个可以发送到web服务器的物理“dist”文件夹版本。dist文件夹有7.8MB,但实际上只需要234KB就可以在web浏览器中加载页面。
2 - Webkit入门套件
这个Webpack入门套件比上面的教程提供了更多的测试功能,看起来很受欢迎。
**Production build with
- Angular Rc5
- Gulp
- typescripts
- systemjs**
1)con-cat all js files and css files include on index.html using "gulp-concat".
- styles.css (all css concat in this files)
- shims.js(all js concat in this files)
2)copy all images and fonts as well as html files with gulp task to "/dist".
3)Bundling -minify angular libraries and app components mentioned in systemjs.config.js file.
Using gulp 'systemjs-builder'
SystemBuilder = require('systemjs-builder'),
gulp.task('system-build', ['tsc'], function () {
var builder = new SystemBuilder();
return builder.loadConfig('systemjs.config.js')
.then(function () {
builder.buildStatic('assets', 'dist/app/app_libs_bundle.js')
})
.then(function () {
del('temp')
})
});
4)Minify bundles using 'gulp-uglify'
jsMinify = require('gulp-uglify'),
gulp.task('minify', function () {
var options = {
mangle: false
};
var js = gulp.src('dist/app/shims.js')
.pipe(jsMinify())
.pipe(gulp.dest('dist/app/'));
var js1 = gulp.src('dist/app/app_libs_bundle.js')
.pipe(jsMinify(options))
.pipe(gulp.dest('dist/app/'));
var css = gulp.src('dist/css/styles.min.css');
return merge(js,js1, css);
});
5) In index.html for production
<html>
<head>
<title>Hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<link rel="stylesheet" href="app/css/styles.min.css" />
<script type="text/javascript" src="app/shims.js"></script>
<base href="/">
</head>
<body>
<my-app>Loading...</my-app>
<script type="text/javascript" src="app/app_libs_bundle.js"></script>
</body>
</html>
6) Now just copy your dist folder to '/www' in wamp server node need to copy node_modules in www.
Angular CLI 1.x。适用于Angular 4.x。x 5. x.x)
这支持:
角2。X和4.x 最新Webpack 2.x Angular AoT编译器 路由(正常和惰性) SCSS 自定义文件捆绑(资产) 额外的开发工具(linter,单元和端到端测试设置)
初始设置
ng new project-name --routing
你可以添加——style=scss来支持SASS .scss。
你可以添加——ng4来使用Angular 4而不是Angular 2。
创建项目后,CLI会自动为你运行npm install。如果你想使用Yarn,或者只是想查看项目框架而不安装,请在这里检查如何做到这一点。
包的步骤
在项目文件夹内:
ng build -prod
在当前版本中,您需要手动指定——aot,因为它可以在开发模式中使用(尽管由于速度慢,这是不实际的)。
它还为更小的包执行AoT编译(没有Angular编译器,而是生成编译器输出)。如果你使用Angular 4, AoT的包会更小,因为生成的代码更小。 你可以在开发模式下用AoT测试你的应用(source cemaps, no minification),通过运行ng build——AoT测试你的应用。
输出
默认的输出目录是。/dist,尽管可以在。/angular-cli.json中更改。
部署文件
构建步骤的结果如下:
(注意:<content-hash>指的是文件内容的hash /指纹,这意味着是一种缓存破坏方式,这是可能的,因为Webpack自己写脚本标签)
。/ dist /资产 原样从。/src/assets/**复制的文件 / dist / index . html 从。/src/index.html,添加webpack脚本后 源模板文件可以在。/angular-cli.json中配置 / dist / inline.js 小型webpack加载器/ polyfill / dist /主要。< content-hash > .bundle.js 主.js文件,包含所有生成/导入的.js脚本 。/ dist /风格。< content-hash > .bundle.js 当你为CSS使用Webpack加载器时,这是CLI的方式,它们是通过JS加载的
在旧版本中,它还创建了gzip版本来检查它们的大小,以及.map源地图文件,但这不再发生,因为人们一直要求删除这些文件。
其他文件
在某些情况下,你可能会发现其他不需要的文件/文件夹:
/ out-tsc /。 从/ src / tsconfig。json的outDir / out-tsc-e2e /。 从/ e2e / tsconfig。json的outDir / dist / ngfactory / 来自AoT编译器(在beta 16中,不使用CLI就无法配置)