Angular CLI终极参考指南（翻译）-构建部署

Angular CLI终极参考指南

如果翻译内容对你产品困扰，可查看原文The Ultimate Angular CLI Reference Guide

构建项目

开发期间运行ng serve，会在虚拟文件系统中自动构建打包Angular应用。
当你准备发布应用到生产，你需要真实的文件部署到服务器或云上。
构建打包应用用于部署，可运行：

$ ng build

命令将输出以下内容到控制台：

3656ms building modules
Hash: 69fb9d88c4f502e01790                                                                                                                                                  
Version: webpack 2.1.0-beta.25
Time: 6457ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js    2.54 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.57 MB    0, 2  [emitted]  main
       styles.map    14.1 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  472 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  
chunk    {0} main.bundle.js, main.map (main) 2.03 MB {1} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk    {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0       
    chunk    {0} index.html 339 bytes [entry] [rendered]

这条命令做了什么？

1. AngularCLI从angular-cli.json文件中加载配置。
2. AngularCLI运行webpack构建打包Javascript和CSS代码。
3. 输出结果到AngularCLI配置中指定的目录下，默认目录是dist。

可选参数

• --aot：预编译（可查看章节future features）。
• --base-href:string,设置index.html文件中的base href参数。
• --environment:string,默认dev，在哪个环境中使用。
• --output-path:string,文件输出目标路径。
• --target:string,默认development，在哪个环境中使用。
• --watch:boolean,默认false，监听文件变化，当监听到文件变化的时候，重新构建

target

指定的target会影响到构建进程操作，允许值如下所示：

• development:默认值，不压缩混淆
• production:压缩混淆代码
  构建生产环节代码：

$ ng build --target=production

构建出几个boundl文件，以及压缩、混淆并在文件名中添加了hash值

3596ms building modules
Hash: 3d5ff21d335b08426087                                                                                                                                                  
Version: webpack 2.1.0-beta.25
Time: 9643ms
                                 Asset       Size  Chunks             Chunk Names
   main.a8db3859286ec456f5d8.bundle.js     825 kB    0, 2  [emitted]  main
 styles.b52d2076048963e7cbfd.bundle.js    3.97 kB    1, 2  [emitted]  styles
                             inline.js    1.39 kB       2  [emitted]  inline
main.a8db3859286ec456f5d8.bundle.js.gz     187 kB          [emitted]  
                            index.html  514 bytes          [emitted]  
                     assets/.npmignore    0 bytes          [emitted]  
chunk    {0} main.a8db3859286ec456f5d8.bundle.js (main) 2.03 MB {1} [initial] [rendered]
chunk    {1} styles.b52d2076048963e7cbfd.bundle.js (styles) 9.96 kB {2} [initial] [rendered]
chunk    {2} inline.js (inline) 0 bytes [entry] [rendered]

target环境

通过环境你可以指定相应定制的应用环境设置
你可以在angular-cli.json文件中自定义环境。默认为：

• source:使用environments/environment.ts中定义的设置。
• dev: 使用environments/environment.ts中定义的设置。
• prod:使用environments/environment.ts中定义的设置。
  environments/environment.ts文件等同于：

export const environment = {
  production: false
};

environments/environment.prod.ts文件等同于：

export const environment = {
  production: true
};

构建进程默认使用dev环境。
如果你指定了其他的环境，构建进程将使用相应的环境：

Uses environments/environment.ts

$ ng build

Also uses environments/environment.ts

$ ng build --environment=dev

Uses environments/environment.prod.ts

$ ng build --environment=prod

就像在src/main.ts一样，你可以通过引入environments/environment来获取environment 设置：

import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

构建进程会确保你import的环境是正确的。

部署项目

当你准备部署项目，你可以使用AngularCLI将项目部署到主机供应商上。
目前AngularCLI只支持GitHub Pages:

$ ng github-pages:deploy

这条命令做了什么？

1. 应用程序按照生产模式构建打包（生产target+生产environment）。
2. 结果输出到dist目录。
3. 在你的Git仓库下创建gh-pages分支，与GitHub要求的文件与布局相一致。
4. 产生一条Git commit。
5. commit pushed到Github上。
   如果你的Git仓库有没关联远程GitHub仓库，AngularCLI将会给你必要的提示。

可选参数

• --message:string,构建的时候提交的message，必须写在引号中。
• --target:string,默认development,使用的环境
• --user-page:boolean,默认false,是否以user/org页面部署到GitHub上
• --skip-build:boolean,默认false,跳过构建直接部署
• --gh-token:string,使用Github的token
• --gh-username:string,使用Github用户名
• --base-href:string,在index.html文件中使用的base href值
  未来将增加支持其他主机供应商（hosting providers）