Angular-seed的使用

标签：任务   css   composite   tar   ret   bsp   样式   sse   nbsp   

从零开始创建一个前端工程，正式编码前的准备工作是非常繁琐的，而且，对于像我这样的前端新手，可能都没法胜任。于是有了一些模板工程，可以作为一个工程的起点。

对于使用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中。

配置

默认的配置在 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>元素，例如： <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 。

单元测试
有几点需要注意：  
    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的使用

标签：任务   css   composite   tar   ret   bsp   样式   sse   nbsp   

原文地址：http://www.cnblogs.com/a-distant-bright-star/p/6679437.html