如何捆绑Angular应用程序进行生产

2018-06-30 16:11:34

我想在这个线程中跟踪和更新最新的最好的（也是最简单的）方法，将Angular（版本2，4，...）捆绑在一个实时Web服务器上进行生产。

请在回答中包含Angular版本，以便我们在更新的版本中跟踪更好。

`2.x, 4.x, 5.x, 6.x` （TypeScript）与Angular CLI

OneTime安装程序

npm install -g @angular/cli

ng new projectFolder创建一个新的应用程序

捆绑步骤

ng build --prod （当目录是projectFolder时在命令行中运行）

用于生产的标志prod包（请参阅生产标志附带的选项列表的Angular文档）。

使用Brotli压缩使用以下命令压缩资源

for i in dist/*; do brotli $i; done

bundle默认生成为projectFolder / dist（/ $ projectFolder for 6）

产量

使用CLI 6.0.1 Angular 6.0.1大小

dist/main.[hash].bundle.js您的应用程序捆绑了[大小：151 KB，适用于新的Angular CLI应用程序，为37 KB压缩]。

dist/polyfill.[hash].bundle.js将dist/polyfill.[hash].bundle.js依赖项（@angular，RxJS ...）捆绑[size：58 KB，用于新的Angular CLI应用程序为空，压缩为17 KB ]。

dist/index.html应用程序的入口点。

dist/inline.[hash].bundle.js webpack loader

dist/style.[hash].bundle.css样式定义

从Angular CLI资产配置复制的dist/assets资源

部署

您可以使用ng serve --prod命令来预览应用程序，该命令启动本地HTTP服务器，以便可以使用http：// localhost：4200访问包含生产文件的应用程序。

对于生产用法，您必须从您选择的HTTP服务器的dist文件夹中部署所有文件。

`2.0.1 Final`使用Gulp（TypeScript - 目标：ES5）

OneTime安装程序

npm install （当direcory是projectFolder时，在cmd中运行）

捆绑步骤

npm run bundle （当direcory是projectFolder时，在cmd中运行）

将生成捆绑包到projectFolder / bundles /

产量

bundles/dependencies.bundle.js [ 大小：〜1 MB （尽可能小）]

包含rxjs和角度依赖关系，而不是整个框架

bundles/app.bundle.js [ 大小：取决于你的项目 ，我的是bundles/app.bundle.js MB ]

包含您的项目

文件结构

projectFolder / app / （所有组件，指令，模板等）

projectFolder / gulpfile.js

var gulp = require('gulp'),
  tsc = require('gulp-typescript'),
  Builder = require('systemjs-builder'),
  inlineNg2Template = require('gulp-inline-ng2-template');

gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});

gulp.task('inline-templates', function () {
  return gulp.src('app/**/*.ts')
    .pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
    .pipe(tsc({
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false
    }))
    .pipe(gulp.dest('dist/app'));
});

gulp.task('bundle-app', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

gulp.task('bundle-dependencies', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

projectFolder / package.json （与Quickstart指南相同，只显示了需要捆绑的devDependencies和npm-scripts）

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    ***
     "gulp": "gulp",
     "rimraf": "rimraf",
     "bundle": "gulp bundle",
     "postbundle": "rimraf dist"
  },
  "license": "ISC",
  "dependencies": {
    ***
  },
  "devDependencies": {
    "rimraf": "^2.5.2",
    "gulp": "^3.9.1",
    "gulp-typescript": "2.13.6",
    "gulp-inline-ng2-template": "2.0.1",
    "systemjs-builder": "^0.15.16"
  }
}

projectFolder / systemjs.config.js （与快速入门指南相同，不再可用）

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app/boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  };

  // filterSystemConfig - index.asp's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

projetcFolder / dist-systemjs.config.js （只显示与systemjs.config.json的区别）

var map = {
    'app':                        'dist/app',
  };

projectFolder / index.html （制作） - 脚本标记的顺序非常重要。在捆绑标签之后放置dist-systemjs.config.js标签仍然允许程序运行，但依赖捆绑将被忽略，并且将从node_modules文件夹加载依赖关系。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <base href="/"/>
  <title>Angular</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

<my-app>
  loading...
</my-app>

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>

<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>

<script>
    System.import('app/boot').catch(function (err) {
      console.error(err);
    });
</script>
</body>
</html>

projectFolder / app / boot.ts是引导程序所在的位置。

我能做的最好的:)

带有Webpack的Angular 2（不需要CLI设置）

1- Angular2团队的教程

Angular2团队发布了一个使用Webpack的教程

我创建并将教程中的文件放在一个小型的GitHub种子项目中。所以你可以快速尝试工作流程。

说明：

npm安装

npm开始 。为了发展。这将创建一个虚拟的“dist”文件夹，将在您的本地主机地址上实时重新加载。

npm运行构建 。用于生产。 “这将创建一个物理的”dist“文件夹版本，它可以发送到网络服务器，dist文件夹为7.8MB，但实际上只需要234KB就可以在Web浏览器中加载页面。

2 - Webkit入门套件

这个Webpack入门套件提供了比上述教程更多的测试功能，并且看起来很流行。

链接地址: http://www.djcxy.com/p/85571.html

上一篇: How to bundle an Angular app for production

下一篇: UIDocumentInteractionController not showing print option

如何捆绑Angular应用程序进行生产

2.x, 4.x, 5.x, 6.x （TypeScript）与Angular CLI

OneTime安装程序

捆绑步骤

产量

部署

2.0.1 Final使用Gulp（TypeScript - 目标：ES5）

OneTime安装程序

捆绑步骤

产量

文件结构

带有Webpack的Angular 2（不需要CLI设置）

1- Angular2团队的教程

2 - Webkit入门套件

`2.x, 4.x, 5.x, 6.x` （TypeScript）与Angular CLI

`2.0.1 Final`使用Gulp（TypeScript - 目标：ES5）