一.踩坑
1.问题来源
如何自定义环境并在启动时指定环境
2.解决方案
使用configuration参数启动项目,如
ng serve --configuration=local or ng serve -c local
启动名为local的环境环境的定义在angular.json文件中(architect下build和serve都要添加环境配置),如下所示
其中默认使用的时environment.ts文件作为当前的环境文件,如需要在不同环境中使用不同的environment文件则需要写fileReplacements进行文件的替换
二.相关知识
1.添加新环境
Reference :Angular Cli使用
在angular.json的build中添加配置(如添加一个dev2的环境)
在angular.json的serve中添加配置,当使用
ng serve -c dev2
时以dev2环境的方式配置
2.构建命令
通常使用的构建命令是
ng build
,构建会从angular.json
中读取相关配置上述命令等同于如下命令
其中用到了如下特性(关闭 aot 构建、生成 sourcemaps 等):
如果需要生成生成环境的构建,运行如下命令:
默认开启的选项有(开启 aot 构建,关闭 sourcemaps 等):
3.测试
如果是库项目或者一些公有底层项目,一个项目需要配套的测试文件,可以使用
ng test
来进行单元测试,使用ng e2e
来进行集成测试。不过如果是变化频繁的业务型项目,可以看情况是否启用测试。
如果不需要测试,可以将相关测试文件全部删掉即可,另外用
ng new
和ng g
生成项目和组件时,可以忽略生成测试文件。
4.脚手架
可以使用如下命令快速生成项目代码
5.代理
通常我们采用
ng serve --proxy-config proxy.conf.json
的方式实现代理,深入了解之后发现,ng serve
底层使用了webpack-dev-server
,而webpack-dev-server
又使用了http-proxy-middleware
。
6.自定义规范模板
企业中都会有自己的代码规范,可能与
ng g
命令生成的样式不同,我们可以借助vscode自带的snippet定义模板,可以参考 VSCode Snippet
7.生产与开发build对比
ng build | ng build --prod | |
---|---|---|
Environment | environment.ts | environment…prod.ts |
缓存 | 只缓存css里引用的图片 | 所有build的文件 |
source maps | 生成 | 不生成 |
uglify | 不 | 是 |
Tree-Shaking | 不去掉无用代码 | 去掉无用代码 |
AOT | 不 | 是 |
Bundling打包 | 是 | 是 |
–build-optimizer | 否 | 是 |
–named-chunks | 是 | 否 |
–output-hashing | media | 所有 |