angular PC 端框架搭建

angular 6 兼容性

了解angular不同版本支持浏览器情况,尤其是IE:
https://angular.io/guide/browser-support

angular6 cli 创建项目

npm install -g @angular/cli
ng new 代码库名
具体参考文档:https://github.com/angular/angular-cli/wiki

添加 rxjs-compat

angular 6使用的是RxJS 6,它带来了一些重大改变,但是可以通过添加rxjs-compat缓解这一问题,rxjs-compat软件包允许您在保持v5代码运行的同时逐渐迁移。
npm install rxjs-compat@6
还可以安装rxjs-tslint自动转成rxjs6。
npm install rxjs-tslint
建立 migrate.tslint.json

{
  "rulesDirectory": ["node_modules/rxjs-tslint"],
  "rules": {
    "update-rxjs-imports": true,
    "migrate-to-pipeable-operators": true,
    "collapse-rxjs-imports": true
  }
}

执行 tslint-fix
./node_modules/.bin/tslint -c migrate.tslint.json --project src/tsconfig.app.json --fix

具体内容:
RxJS 6有哪些新变化?
如何從 RxJS 5.x 升級至 RxJS 6

polyfill IE11(BA comfirm)

Angular CLI 创建的框架带了polyfill.ts文件,里面包含了一些通用的polyfill,根据需求打开一些polyfill。
Angular and Internet Explorer

prettier

添加prettier保持代码风格一致。prettier只关注格式化,并不具有lint检查语法等能力。
npm install prettier
在项目目录下添加一个文件.prettierrc

{
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.js"],
      "options": {
        "parser": "typescript",
        "singleQuote": true,
        "printWidth": 100
      }
    },
    {
      "files": "**/*.scss",
      "options": {
        "parser": "css"
      }
    },
    {
      "files": "**/*.json",
      "options": {
        "parser": "json",
        "printWidth": 120
      }
    }
  ]
}

参考文档
vscode + prettier 专治代码洁癖

tslint 代码语法审查

angular-cli创建的项目自带了tslint,需要做的就是把规则和配置做些修改。

tslin.json文件是规则配置说明,能自动检查,并提示错误。配置项可参考官方文档:Configuring TSLint

我们之前已经使用了prettier。所以可以加上tslint-config-prettier 和tslint-plugin-prettier。

tslint.json

{
 "rulesDirectory": ["node_modules/codelyzer", "tslint-plugin-prettier"],
  "extend": ["tslint:latest", "tslint-config-prettier"],
  "rules": {
    "prettier": true,
.....
   }

}

tslint-plugin-prettier是把 Prettier 作为TSLint的一个规则加入到里面。

使用tslint:recommended(官方推荐配置)或tslint:latest(除了官方推荐的还有一些持续更新的内容),tslin-config-prettier会把原先lint配置里涉及到格式化的配置覆盖重写,其他lint同理,这个主要是解决prettier和tslint格式化冲突的问题。

把prettier加到pre-commit里,使用husky和pretty-quick

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },

参考文档
用 ESLint 和 Prettier 写出高质量代码和tslint同理

apollo

http请求使用的是graphql,所以要安装apollo-angular。

    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
...//dev
    "apollo-angular": "^1.1.2",
    "apollo-angular-link-headers": "^1.1.0",
    "apollo-angular-link-http": "^1.1.1",
    "apollo-cache-inmemory": "^1.2.5",
    "apollo-client": "^2.3.5",
    "apollo-link-context": "^1.0.8",

具体请参考apollo-angular官方文档

反向代理

现在很多都是前后端分离的开发模式,所以前端经常会有跨域请求。使用代理以后所有http请求在浏览器看来都是同域请求,不再存在跨域问题。

找了一个关于反向代理的解释:反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

当前做的就是把api接口反向代理到graphql mock server:

  • 新加一个文件proxy.conf.json
{
  "/api": {
    "target": "http://127.0.0.1:8080/graphql",
    "secure": false
  }
}
  • 在angular.json中architect.serve.options添加一条proxyConfig
 "options": {
    "browserTarget": "cmbkb-portal-desktop:build",
    "proxyConfig": "./proxy.conf.json"
  },
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ApolloModule, Apollo } from 'apollo-angular';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { setContext } from 'apollo-link-context';
import { httpHeaders } from 'apollo-angular-link-headers';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ApolloModule, HttpLinkModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(apollo: Apollo, httpLink: HttpLink) {
    const headers = httpHeaders();
    const http = httpLink.create({ uri: '/api' });
    apollo.create({
      link: headers.concat(http),
      cache: new InMemoryCache()
    });
  }
}

参考
angular-cli关于proxy的配置
基于angular-cli配置代理解决跨域请求问题

Jest

Jest 是跑测试的一个框架,比起angular自带的karma要快的多。

  • npm install jest jest-preset-angular --dev
  • 在package.json添加入口:
"jest": {
  "preset": "jest-preset-angular",
  "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
}

setupJest.ts

import 'jest-preset-angular';
import './jestGlobalMocks';

jestGlobalMocks.ts

const mock = () => {
  let storage = {};
  return {
    getItem: key => (key in storage ? storage[key] : null),
    setItem: (key, value) => (storage[key] = value || ''),
    removeItem: key => delete storage[key],
    clear: () => (storage = {})
  };
};

Object.defineProperty(window, 'localStorage', { value: mock() });
Object.defineProperty(window, 'sessionStorage', { value: mock() });
Object.defineProperty(window, 'getComputedStyle', {
  value: () => ['-webkit-appearance']
});

Object.defineProperty(window, 'URL', {
  value: {
    createObjectURL: () => {}
  }
});

  • 添加命令
"test": "jest",
"test:watch": "jest --watch",

具体配置可以参考testing-angular-faster-jest

UI 框架 - CDK

根据官方get-started引入CDK框架

图标(字体,inline-svg)

现在项目上大部分都偏好使用图标字体。有很多种办法可以实现。
当前使用的是 icon-font-generator 来构造font,并没有把它放进webpack打包流程中,而是分开。
其他方法还有inline-svg等等。

README

更新README

Submodule

有关联的库,可以作为submodule存在

Pipeline

配置流水线

推荐阅读更多精彩内容