angular cli 学习

[Christian-health]

build

ng build

Overview

ng build compiles the application into an output directory ng build 将应用程序编译到输出目录

Creating a build

ng build

The build artifacts will be stored in the dist/ directory. build构建出来的东西会被放在dist目录

All commands that build or serve your project, ng build/serve/e2e, will delete the output directory (dist/ by default). This can be disabled via the --no-delete-output-path (or --delete-output-path=false) flag.

ng build / ng serve /ng e2e 这些命令都会删除output目录（默认是dist） 你可以禁用这个删除通过--no-delete-output-path 或者 --delete-output-path=false

Build Targets and Environment Files 构建目标和环境文件

ng build can specify both a build target (--target=production or --target=development) and an environment file to be used with that build (--environment=dev or --environment=prod). By default, the development build target and environment are used.

ng build可以指定构建目标（--target = production或--target = development）和要与该构建一起使用的环境文件（--environment = dev或--environment = prod）。 默认情况下，使用开发构建目标和环境。

The mapping used to determine which environment file is used can be found in .angular-cli.json: 这个--environment = dev或--environment = prod决定了哪个环境文件将会被使用，我们在angular-cli.json中可以找到如下的内容：

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

These options also apply to the serve command. If you do not pass a value for environment, it will default to dev for development and prod for production. 这些选项也可以应用于ng serve命令。如果你没有传递值给环境，那么默认的给开发模式传递dev而给生产模式传递prod

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

You can also add your own env files other than dev and prod by doing the following: 您还可以通过执行以下操作添加除dev和prod之外的您自己的env文件：

1. create a src/environments/environment.NAME.ts

创建一个src/environments/environment.NAME.ts文件

2. add { "NAME": 'src/environments/environment.NAME.ts' } to the apps[0].environments object in .angular-cli.json

然后在angular-cli.json文件中添加面的内容

3. use them via the --env=NAME flag on the build/serve commands.

最后通过 --env=NAME来使用，在build或者serve命令下。

Base tag handling in index.html index.html中的基本标签处理 When building you can modify base tag () in your index.html with --base-href your-url option. 当你构建的时候，你可以修改index.html中的base tag，使用--base-href 你选项中

//设置index.html中的--base-href 
# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
ng build --bh /myUrl/

Bundling & Tree-Shaking 打包和摇树 All builds make use of bundling and limited tree-shaking, while --prod builds also run limited dead code elimination via UglifyJS. 所有构建都使用bundling和有限的tree-shaking，而--prod构建也通过UglifyJS运行有限的死码消除。