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

look_w

在 angular 工程中，添加 rollup-config.js 或 rollup-config.json 配置 rollup 打包方式与流程：

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

import rollup from 'rollup' import nodeResolve from 'rollup-plugin-node-resolve' import commonjs from 'rollup-plugin-commonjs' import uglify from 'rollup-plugin-uglify' export default { entry: 'dist/main-aot.js', dest: 'dist/build.js', // output a single application bundle sourceMap: false, format: 'iife', onwarn: function(warning) { // Skip certain warnings // should intercept ... but doesn't in some rollup versions if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; } // console.warn everything else console.warn(warning.message); }, plugins: [ nodeResolve({jsnext: true, module: true}), commonjs({ include: 'node_modules/rxjs/**', }), uglify() ] }

rollup-plugin-node-resolve: 用 node resolution 算法来定位第三方依赖的引用模块
rollup-plugin-commonjs: 将符合 commonjs 规范的模块转换成 es6 语法，这样可以构建到 rollup 生成的文件包中
rollup-plugin-uglify: 减小和压缩 bundle 文件
如果只是在 IBM Cloud 上单纯部署由 Angular 实现的静态页面，可选用§.
利用 DevOps toolchain 部署整合后的工程准备 manifest.yml 文件在 IBM Cloud 上部署该工程，首先需要准备 manifest.yml 文件:

1 2 3 4 5 6 7 8 9

applications: - path: . memory: 512M instances: 1 domain: w3ibm.mybluemix.net name: xxx //name of your application host: xxx // pay attention to hostname when there are several hosts     available to your account disk_quota: 512M

这个文件主要用来对应用进行描述。需要注意的是，当用户的账户下可访问多个 IBM                Cloud 域名时，需要写清 domain 与 host 参数，使该参数与新建应用时填写的 Host name 和 Domain                保持一致，防止部署错误。因为 IBM                Cloud 已经帮用户准备了许多常用的构建包，所以可以直接选择新建 Cloud Foundry 应用下的 nodejs                Loopback 构建包，如下图2所示：
图 2. 创建CF应用示意图

在应用的 Dashboard 上，打开持续构建工具，如下图所示：
图 3. 持续构建仪表板

开启持续构建工具后，四个工具会默认添加到项目中：Issues, Git, Delivery Pipeline和Eclipse Orion Web                IDE。
开启持续构建工具后，可以配置源代码所在路径。通常，我们会新建一个 git 项目，该项目所在路径为：§。
图 4. 关联工程的 git 仓库到持续构建工具链