Angular-seed的使用

程胤运
2023-12-01

Angular-seed的使用

从零开始创建一个前端工程,正式编码前的准备工作是非常繁琐的,而且,对于像我这样的前端新手,可能都没法胜任。于是有了一些模板工程(或者是创建模板工程的工具,这一类东西也被称为脚手架),可以作为一个工程的起点。对于使用Angular的人来说,Angular-seed是个不错的选择(https://github.com/mgechev/angular-seed)。 其实我对于分析这个工程的结构没啥兴趣,只是在使用中碰到了一些问题,为了解决问题不得不多做了一些了解。我觉得这些了解对于一个前端刚入门的人还是有很大实际用处的。

build

Angular-seed使用gulp作为构建工具。
根目录下的 gulpfile.ts 定义了各种gulp task,实际上task 是定义在tools/tasks目录下面,在gulpfile.ts 加载了这些任务。任务分为angular-seed预先提供的任务,放在tools/tasks/seed目录下,另一类是本工程自定义的任务, 放在 tools/tasks/project目录下。 另外,可以把多个简单任务组合起来,形成一个 复合任务,通过 loadCompositeTasks()加载。复合任务定义在 tools/config下的 seed.tasks.json 和 project.tasks.json中。

gulp插件

Angular-seed使用了一个gulp插件gulp-load-plugins来加载所有gulp插件,这个插件可以根据package.json中的依赖加载所有gulp插件。

配置

默认的配置在 tools/config/seed.config.ts 中,项目自定义的配置一般放在 tools/config/project.config.ts。

SystemJS的配置

Angular-seed使用的打包工具是SystemJS, 在 seed.config.ts 中和SystemJS相关的配置包括: SYSTEM_CONFIG_DEV, SYSTEM_CONFIG, SYSTEM_BUILDER_CONFIG。可以在 project.config.ts 中补充或者覆盖SysteJS的相关配置,例如:

this.mergeObject(this.SYSTEM_CONFIG_DEV, {
  transpiler: 'plugin-babel'
});
this.mergeObject(this.SYSTEM_BUILDER_CONFIG['packages'], {
  'd3-selection': { main: 'index.js', meta: { format: 'esm'}},
  'angular2-uuid': { main: 'index.js', meta: { format: 'esm'}},
});

CSS和字体文件

添加字体和样式, 官方wiki上有说明: https://github.com/mgechev/angular-seed/wiki/Add-external-fonts https://github.com/mgechev/angular-seed/wiki/Add-external-scripts-and-styles 需要注意的一点:对于CSS文件,如果是按照 wiki 上的说明,通过配置 this.NPM_DEPENDENCIES 注入CSS文件,则指定的CSS文件的内容都会被注入 main.css, 但是有时候你可能希望添加的CSS文件仍然保持独立,这时候需要自己添加一个任务,就像添加字体那样,在build过程中把相应的CSS文件拷贝 dist/ 下面相应的目录中。 并且,你还需要在 client/index.html 中加上相应的加载 CSS文件的 元素,例如: <link rel="stylesheet" href="<%= APP_BASE %>assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

index.html

index.html 是一个模板, 在构建过程中,使用gulp插件 gulp-template 渲染成实际的 html 。
gulp-template实际使用了lodash 库的 _.template 来填充模板,其占位符的格式非常灵活,还可以自定义,index.html中用到的几种占位符的含义:

<%= APP_TITLE %> 内插字符串, 即从数据中找到 APP_TITLE 对应的值,替换 <%= APP_TITLE %>
<% if (BUILD_TYPE === 'dev') { %> , 把 <% ... %> 内的字符串作为 JS 语句进行 eval 。

实际上,ts文件中的字符串也可以使用<% ... %>这种形式的占位符,因为Angular-seed中build js的任务也会把js文件送入 gulp-template 进行处理。

单元测试

有几点需要注意:
1. 测试用例需要放在一个 main 函数中,这是 Angular-seed的规定,形式可参考Angular-seed自带的几个组件的 spec文件,相关 issue: https://github.com/mgechev/angular-seed/issues/922

2. 默认的测试任务是不能调试测试用例的,就是自动运行所有用例,然后浏览器就关闭了,如果希望调试用例,可以

自己加个调试任务,比如 karma.debug.ts:

import Config from '../../config';

import * as karma from 'karma';
import { join } from 'path';

const startKarma = (done: any, config: any = {}) => {
  return new (<any>karma).Server(Object.assign({
    configFile: join(process.cwd(), 'karma.conf.js'),
    singleRun: false
  }, config)).start(done);
};

/**
 * Executes the build process, running all unit tests using `karma`.
 */
export = (done: any) => {
  return startKarma(done, Config.getKarmaReporters());
};

3. 根据需要修改根目录下 karma.conf.js 文件  

比如,添加一些测试时需要serve的文件,在 files: [ ... ] 内添加:
{ pattern: 'node_modules/someModuleForTest/**/*.js', included: false, watched: false, served:true },

i18n

i18n 默认是关闭的,可以按照wiki上的说明打开: https://github.com/mgechev/angular-seed/wiki/Enabling-Angular-i18n-native 但是,除此以外,还有一些问题,wiki上没提到:

  1. 要修改根目录的 tsconfig.json 的配置,可以参考: https://github.com/mgechev/angular-seed/issues/1440 主要就是要在 "files": [...] 里加上 "src/client/app/main.ts" ,在 "exclude": [ ... ] 里加上 "tools" 。

  2. package.json 里面定义的 i18n 任务 : "i18n": "ng-xi18n && gulp clean.i18n" ,其实后一个任务 clean.i18n 是不存在的,所以, 要么删掉后半句,要么你自己创建这样一个任务。

此外, 在执行 npm run i18n 的时候,可能会由于 ts 编译时候的一些类型或者变量不识别导致任务执行失败,但是没关系,这不影响 生成 messages.xlf 文件。

lazy-loading

目前暂不支持,但是有人自己做了(看起来工作量还不小),没合入主分支,具体可参考: https://github.com/mgechev/angular-seed/issues/1844
https://github.com/mgechev/angular-seed/pull/1714
此外,Angular-seed 有一个名叫lazy的分支,实现了 lazy-loading, 但是我按照该分支的变更,修改我的工程,打包出来的js文件执行总是会出错,不知道是不是systemJS的打包工具在win7下有问题(我在win7下开发的,我知道别人在linux下是打包出来是没问题的)。

转载于:https://www.cnblogs.com/a-distant-bright-star/p/6679437.html

 类似资料: