在 IBM Cloud 上利用 Loopback 模板搭建 Angular 应用并实现自动部署（2）

look_w

Loopback 与 Angular 2 的整合与本地开发环境搭建构建方式1：本地开发环境搭建（在本地同时启动 Angular 工程与 Loopback 工程）通常我们在开发过程中，会选择在本地搭建开发环境并运行，以方便纠错和部署。Angular 工程中，新构建的项目都会自带 angular-cli.json
在本地，我们通过 p-s 和 nodemon 包构建工程：
p-s 是一个针对 npm 的脚本构建包，它帮我们规避了冗长的 package.json 文件和 json 文件的功能不足的缺点。
nodemon 包可以帮助开发者在开发过程中监控工程中的文件变化并刷新 node 工程。
Loopback 工程中 package-scripts.js 对本地运行的配置:
local: 'nodemon . --watch common --watch server --ext js,json',
Angular 工程中 package-scripts.js 对本地运行的配置：
local: 'ng serve --port 4200 --host 0.0.0.0 --proxy-config                proxy.conf.json'
用一个代理配置文件将所有的后端请求都转到特定的服务器地址，而不是 angular cli 内置的 webpack 开发服务器地址。
proxy.conf.json:
图 1. proxy.conf.json 文件内容
构建方式2：将 Angular 工程打包进 Loopback 工程在进行编译之前，可以使用 loopback-sdk-builder 生成数据模型，以保证 Angular 工程和 Loopback 工程使用同一套数据模型。
npm install –-save-dev @mean-expert/loopback-sdk-builder
执行上述命令行之后，分别修改前后端工程的 package-scripts.json 文件，添加反向构建的脚本
build: {
sdk: './node_modules/.bin/lb-sdk . local dev                ../angular-project/src/app/shared/sdk',
}
如果是在本地进行部署，可以直接访问http://localhost:4200§查看部署后的工程。
JiT(Just-in-time)编译ng build
默认是 JiT 的编译方式进行打包，执行这行 Angular CLI 命令后会自动生成 dist 文件夹，文件目录如图所示:
├── app
| └── data
| ├── mock-data-2.1.json
| ├── mock-data-2.2.json
| ├── mock-data-2.3.json
| └── mock-data-2.4.json
├── favicon.ico
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
├── icomoon.eot
├── icomoon.svg
├── index.html
├── inline.bundle.js
├── inline.bundle.map
├── main.bundle.js
├── main.bundle.map
├── polyfills.bundle.js
├── polyfills.bundle.map
├── styles.bundle.js
├── styles.bundle.map
├── vendor.bundle.js
└── vendor.bundle.map
AoT(Ahead-of-time) 编译AoT 编译能加快应用的启动时间，因为在客户端不需要再导入 angular                编译器，安装的脚本库就会相应变小。同时，由于编译过程是在服务器端构建时完成的，在编译过程中就会提前发现错误，避免了浏览器运行时编译让用户发现异常。通常，在生产环境中都会采用                AoT 的编译方式，因为源代码会一起混合编译，防止代码泄露。
利用 Angular CLI 提供的 AoT 编译 + Webpack 摇树方式打包
ng build --prod
因为 Angular                CLI 是基于 webpack 开发的，所以提供了 Webpack 自带的摇树操作。当设置目标版本为生产环境版本时，会自动设置成 AoT                编译方式并加入 Webpack 摇树去掉多余文件。
AoT 编译 + Rollup 摇树 方式打包（官方推荐方式）
为了方便使用，可以将如下代码:
"aot": "node_modules/.bin/ngc -p ./src/tsconfig-aot.json"
加入 package.json 文件中，那么 AoT 编译命令可缩减为
npm run aot
在 /src 目录下加入 tsconfig-aot.json 文件，做 AoT 编译的相关设定：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

{            "compilerOptions": {            "baseUrl": "",            "declaration": false,            "emitDecoratorMetadata": true,            "experimentalDecorators": true,             "lib": ["es2015","dom"],             "mapRoot": "./",             "module": "es2015",             "moduleResolution": "node",             "sourceMap": true,            "target": "es5",             "outDir": "../dist",             "typeRoots": [             "./node_modules/@types",             "./node_modules"             ]             },             "files": [             "./app/app.module.ts",             "./main-aot.ts"             ],             "exclude": [             "node_modules"             ],             "angularCompilerOptions": {             "genDir": "aot",             "skipMetadataEmit" : true             }             }

Rollup 是新一代 JavaScript 模块打包工具。开发者可以在你的应用或库中使用 ES2015                模块，然后高效地将小段代码块打包成一个单一文件用于浏览器和 Node.js 使用。通常应用会引用一些第三方库，但并不是库里面的所有文件都会被调用，这时就会产生垃圾代码（dead                code），这些代码可以通过摇树操作（Tree                shaking）清除，而 Rollup 就提供了这种便捷的操作。同时，因为 Rollup 基于 ES2015 模块，比 Webpack 和                Browserify 使用的 CommonJS 模块机制更高效，所以 Rollup 成为了 Angular 官方推荐的打包方式。