Angular脚手架系列：四、使用Angular CLI进行Build (构建) 和 部署

目录

一、Build

二、ng build

三、Build Targets和Environment

四、Serve

五、部署到nginx

---

一、Build

Build主要会做以下动作:

• 编译项目文件并输出到某个目录
• Build targets决定了输出的结果
• bundling 打包
• 生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉)

二、ng build

可以先看帮助:

ng build --help

Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
usage: ng build <project> [options]

arguments:
  project
    The name of the project to build. Can be an application or a library.

options:
  --aot
    Build using Ahead of Time compilation.
  --base-href
    Base url for the application being built.
  --build-event-log
    **EXPERIMENTAL** Output file path for Build Event Protocol events
  --build-optimizer
    Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.
  --common-chunk
    Use a separate bundle containing code used across multiple bundles.
  --configuration (-c)
    A named build target, as specified in the "configurations" section of angular.json.
    Each named target is accompanied by a configuration of option defaults for that target.
    Setting this explicitly overrides the "--prod" flag
  --cross-origin
    Define the crossorigin attribute setting of elements that provide CORS support.
  --delete-output-path
    Delete the output path before building.
  --deploy-url
    URL where files will be deployed.
  --es5-browser-support
    Enables conditionally loaded ES2015 polyfills.
  --eval-source-map
    Output in-file eval sourcemaps.
  --extract-css
    Extract css from global styles into css files instead of js ones.
  --extract-licenses
    Extract all licenses in a separate file.
  --fork-type-checker
    Run the TypeScript type checker in a forked process.
  --help
    Shows a help message for this command in the console.
  --i18n-file
    Localization file to use for i18n.
  --i18n-format
    Format of the localization file specified with --i18n-file.
  --i18n-locale
    Locale to use for i18n.
  --i18n-missing-translation
    How to handle missing translations for i18n.
  --index
    The name of the index HTML file.
  --lazy-modules
    List of additional NgModule files that will be lazy loaded. Lazy router modules will be discovered automatically.
  --main
    The full path for the main entry point to the app, relative to the current workspace.
  --named-chunks
    Use file name for lazy loaded chunks.
  --ngsw-config-path
    Path to ngsw-config.json.
  --optimization
    Enables optimization of the build output.
  --output-hashing
    Define the output filename cache-busting hashing mode.
  --output-path
    The full path for the new output directory, relative to the current workspace.

    By default, writes output to a folder named dist/ in the current project.
  --poll
    Enable and define the file watching poll time period in milliseconds.
  --polyfills
    The full path for the polyfills file, relative to the current workspace.
  --preserve-symlinks
    Do not use the real path when resolving modules.
  --prod
    Shorthand for "--configuration=production".
    When true, sets the build configuration to the production target.
    By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
  --profile
    Output profile events for Chrome profiler.
  --progress
    Log progress to the console while building.
  --rebase-root-relative-css-urls
    Change root relative URLs in stylesheets to include base HREF and deploy URL. Use only for compatibility and transition. The behavior of this option is non-standard and will be removed in the next major release.
  --resources-output-path
    The path where style resources will be placed, relative to outputPath.
  --service-worker
    Generates a service worker config for production builds.
  --show-circular-dependencies
    Show circular dependency warnings on builds.
  --skip-app-shell
    Flag to prevent building an app shell.
  --source-map
    Output sourcemaps.
  --stats-json
    Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.
  --subresource-integrity
    Enables the use of subresource integrity validation.
  --ts-config
    The full path for the TypeScript configuration file, relative to the current workspace.
  --vendor-chunk
    Use a separate bundle containing only vendor libraries.
  --vendor-source-map
    Resolve vendor packages sourcemaps.
  --verbose
    Adds more details to output logging.
  --watch
    Run build when files change.
  --web-worker-ts-config
    TypeScript configuration for Web Worker modules.

针对开发环境, 就是用命令 ng build.
默认情况下, 它的输出目录在.angular-cli.json文件里ourDir属性配置的, 默认是/dist目录.
build之后会看见dist里面有这些文件:

• inline.bundle.js 这是webpack的运行时.
• main.bundle.js 就是程序代码.
• pollyfills.bundle.js 就是浏览器的Pollyfills.
• styles.bundle.js 样式
• vendor.bundle.js 是angular和第三方库

可以使用source-map-explorer来分析依赖, 并且查看哪些模块和类在bundle里面.
首先修改上一个例子中的代码:

admin.component.html

<p>admin works!</p>

<router-outlet></router-outlet>

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<nav>
  <ul>
    <li><a href="" [routerLink] = "['/dashboard']">Dashboard</a></li>
    <li><a href="" [routerLink] = "['/order']">Order</a></li>
    <li><a href="" [routerLink] = "['/admin']">Admin-->user</a></li>
    <li><a href="" [routerLink] = "['/admin/email']">Admin-->email</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

执行ng build:

可以看到生成了这些文件.

把dist里面的index.html格式化一下看看:

查看main-es5.js和main-es2015.js，可以看到我们写的代码。

在dist/my-app1下面运行程序: ng serve -o:

可以看到在ng serve的时候, 加载了上述的文件.

三、Build Targets和Environment

Environment是指采用哪一个环境文件:

而Targets则是用来决定项目文件是如何被优化的。看一下开发和生产build的对比

	ng build	ng build --prod
Environment	environment.ts	environment..prod.ts
缓存	只缓存css里引用的图片	所有build的文件
source maps	生成	不生成
如何处理css	全局css输出到js文件	生成的是css文件
uglify	不	是
Tree-Shaking	不去掉无用代码	去掉无用代码
AOT	不	是
Bundling打包	是	是
--build-optimizer	否	是(和AOT以及Angular5)
--named-chunks	是	否
--output-hashing	media	所有

下面命令都是针对开发时的build, 它们的作用是一样的:

ng build
ng build --dev
ng build --dev -e=dev
ng build --target=development --environment=dev

下面则是生产build:

ng build --prod
ng build --prod -e=prod
ng build --target=production --environment=prod

其它常用的参数还有:

    --sourcemap -sm 生成source map
    --aot Ahead of Time编译
    --watch -w Watch并rebuild
    --environment -e Build环境
    --target -t Build target
    --dev 表示dev env和target
    --prod 表示prod env和target

先使用--aot:

ng build --aot

试试生产环境:

ng build --prod

可以看到所有的文件都非常小了

四、Serve

ng serve. 已经一直在用了, 下面看看它常用的参数:
    --open -o 打开默认浏览器
    --port -p 端口
    --live-reload -lr 发生变化时重新加载网页(默认开启的)
    --ssl 使用https
    --proxy-config -pc 代理配置
    --prod 在内存中serve 生产模式build的文件
试试 --prod:

ng serve --prod

通过文件大小可以看出确实是prod build的.

 

五、部署到nginx

1、linux安装nginx,查看《linux安装nginx步骤》

2、上传ng build --prod生成的dist下的文件夹（与工程同名）到linux服务器。

3、配置nginx的配置文件nginx.conf

   说明：

A、端口可以是任意非占用的端口;

B、根文件夹，这里指向上传的angular工程所在的文件夹；

4、重启nginx

5、浏览器访问