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 的脚手架工具正在集成验证中，敬请期待。