计算表达式前端工程 本工程由 [Angular CLI](https://github.com/angular/angular-cli) version 7.3.4 创建。
npm install farris-scaffoldnpm run ngc-hello-world编译 Angular 工程。
out-tsc/app/projects/hello-world/src/main.js, 将内容修改为：
import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app/app.module.ngfactory';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory)
.catch(function (err) { return console.error(err); });
//# sourceMappingURL=main.js.map
`
执行 npm run rollup-hello-world, 访问http://localhost:5000/打开应用程序。
添加新应用程序
执行 ng generate applicaton 应用程序名 --prefix=应用程序前缀 --style=scss 创建应用程序。
创建好的应用程序位于 projects/ 目录下。
将 projects/hello-world/build，projects/hello-world/build.json，projects/hello-world/rollup.config.js Copy 至 projects/新应用程序目录下。
将 projects/hello-world/build/config.js 中的
`
const filename = './projects/hello-world/build.json';
`
修改为
`
const filename = './projects/新应用程序/build.json';
`
将 projects/hello-world/build.json 修改为：
`
"ngcOut": "out-tsc/app/projects/新应用程序",
"indexHtmlTemplate": "projects/新应用程序/src/index.rollup.html",
"env": {
"dev": {
"dist": "dist-rollup/新应用程序",
"uglify": false,
"hash": true,
"indexHtml": true,
"serve": true
},
"prod": {
"dist": "dist-rollup-prod/新应用程序",
"uglify": true,
"hash": true,
"indexHtml": true,
"serve": true
}
}
`
将 projects/hello-world/src/index.rollup.html Copy 至projects/新应用程序/src目录下。
将 projects/hello-world/src/index.rollup.html 中的
`
`
修改为
`
<应用程序前缀-root>
`
将 projects/hello-world/src/polyfills.ts Copy 至projects/新应用程序/src目录下。
打开 package.json ， 增加 scripts 命令：
`
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"ngc-hello-world": "ngc -p projects/hello-world/tsconfig.app.json",
"rollup-hello-world": "rollup --config projects/hello-world/rollup.config.js --environment BUILD:prod",
"ngc-new-application": "ngc -p projects/新应用程序/tsconfig.app.json",
"rollup-new-application": "rollup --config projects/新应用程序/rollup.config.js --environment BUILD:prod"
}
`
完成以上步骤后:
可以执行 ng generate component 组件名 创建新组件. 也可以执行 ng generate directive|pipe|service|class|guard|interface|enum|module。
可执行 npm run ngc-new-application ， npm run rollup-new-applicaton 编译新应用程序。
添加新引用
执行 npm install 或者 ng add 添加第三方库。
！！！ 重要：执行 npm install 之后，请将根目录中 antlr.zip 中的文件解压之后放至 node_modules 中。
！！！ 由于 antlr 原生的依赖存在的问题，现在将其调整之后新的文件放至压缩包中。
如需将第三方库分离出来独立打包，需修改 projects/应用程序名/build.json 和 projects/新应用程序/src/index.rollup.html。
在 libs 节点下添加第三方库，如添加 @farris/devkit。
打开 projects/应用程序名/build.json，修改为：
`
"libs": {
"polyfills": {
"entry": "src/polyfills.js",
"polyfill": true,
"needsCommonJS": true
},
"@angular/core": {},
"@angular/common": {},
"@angular/platform-browser": {},
"@angular/forms": {},
"@angular/router": {},
@farris/devkit: {},
"rxjs": {
"sourceMaps": true
},
"rxjs/operators": {
"sourceMaps": true
},
"main": {
"entry": "src/main.js",
"sourceMaps": true
}
}
`
打开 projects/新应用程序/src/index.rollup.html 修改为：
`
`
提取交付物
执行完“编译运行”步骤后，交付产物位于 dist-rollup-prod`目录下，可将应用程序目录直接部署在 Web 服务器中，访问 index.html 做为应用程序入口。