farris-scaffold v0.0.0
Angular Rollup Scaffold
计算表达式前端工程 本工程由 Angular CLI version 7.3.4 创建。
推送至 npm 仓库
npm 仓库登录: 在 VScode 中找到生成的 npm 包位置,一般在 dist 目录中 npm login npm config set registry http://registry.npmjs.org/ npm publish --access=public
编译运行
执行 npm 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
中的
<hlo-root></hlo-root>
修改为
<应用程序前缀-root></应用程序前缀-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
修改为:
<script>
//pre-fetching libs. useful?
//Maybe. See https://developers.google.com/web/fundamentals/primers/modules , "Preload Modules"
System.import('@angular/core');
System.import('@angular/common');
System.import('@angular/platform-browser');
System.import('rxjs');
System.import('rxjs/operators');
System.import('@farris/devkit');
//Load Application
System.import('main');
</script>
提取交付物
执行完“编译运行”步骤后,交付产物位于 dist-rollup-prod
目录下,可将应用程序目录直接部署在 Web 服务器中,访问 index.html 做为应用程序入口。
后续
后续会提供 Farris CLI 工具,将以上步骤自动化,敬请期待。
内置集成 Farris UI 和 Farris Dev Kit 的脚手架工具正在集成验证中,敬请期待。
1 year ago