Angular-seed的使用

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下是打包出来是没问题的）。

posted on 2017-04-07 18:22  等待未知  阅读(456)  评论(0)  编辑  收藏  举报

导航