我创建了一个 GitHub 模板，可以在创建存储库后即可部署到 GitHub Pages，而无需编写任何代码的经历

2 年 ago
宇, 华
4 minutes

这篇文章是 Angular 2019 年度圣诞日历的第一篇文章。
今年我又一次在第一天跳进来 @kasaharu。
今年似乎还有 Angular #2 的 2019 年度圣诞日历哦。

制作适用于 Angular 应用的 GitHub 模板。

这个故事是关于创建了一个GitHub模板，把一些在新建Angular应用后应该做的事情整合在一起，最终能够部署到GitHub Pages上。这些步骤可能对于其他应用也可能有用(?)。

完成品在這裡。

笠原 / 呢喃基础

使用方法

按照模板创建存储库中所述的步骤，从GitHub模板创建存储库。
创建存储库后，按照以下步骤执行克隆到部署。

$ git clone [the-repositoryname]
$ cd [the-repositoryname]
$ yarn
$ yarn ng deploy --base-href=/[the-repositoryname]/

当你完成部署后，访问 https://[你的用户名].github.io/[仓库名称] 就可以看到页面。

有什么被包括进去了？

如果按照kasaharu/ng-basis的方式来创建的话，可以通过将kasaharu/ng-basis作为模板在GitHub上创建一个仓库，这样以下的步骤就不再需要了！

准备

首先准备Angular应用程序。本次使用Angular CLI v9.0.0-rc.3进行设置，并选择了有Routing功能以及使用SCSS作为样式表格式来开始。

$ npx @angular/cli@next new ng-basis
// ※ 作成したタイミングの @next が v9.0.0-rc.3 だっただけで @next をつけると v9.0.0-rc.3 になるわけではないです

生成之后，请执行以下命令。

$ cd ng-basis
$ yarn start

只需这一个步骤，就可以启动 Angular 应用。
现在准备就绪，接下来我将介绍如何使用 ng-basis 进行预先设置。

引入代码格式化工具和代码检查工具。

为什么？

在团队开发中，由于思考和经验的差异，书写方式往往会分散，降低整体的可读性是一个常见问题。
从空格和换行的统一性方面来看，可能会导致循环复杂度增加，并且会出现维护困难的问题。
由于小的差异可能成为讨论的根源，如果将这些问题交给格式化和检查工具，烦恼会减少。

步骤

我们选择了 Prettier 作为 Formatter，并在 Linter 中采用了 TSLint 和 stylelint，这已成为默认选择。

更漂亮

prettier.png
$ yarn add prettier --dev --exact

为了编写格式规则，需要准备一个配置文件 .prettierrc.json，以及一个列出不想进行格式化的文件的 .prettierignore。它们分别以如下的方式编写：

    • .prettierrc.json

 

    .prettierignore

为了使npm脚本能够执行，将以下内容添加到package.json中。

  "scripts": {
    ...,
    "prettier": "prettier --write './**/*.{ts,html,scss}'",
    "prettier:check": "prettier --check './**/*.{ts,html,scss}'"
  },

由于默认代码有可格式化的空间，因此请执行”yarn prettier”。

TSLint – TSLint

tslint.png

尽管在TypeScript中，Linter正逐渐转向ESLint，但由于Angular CLI仍然使用TSLint，因此我们将继续遵循Angular方式。
如果使用Angular CLI创建应用程序，TSLint将被安装，并进行规则更新。
更新后，将其配置为类似tslint.json的格式。
由于每个团队对细节有不同要求，因此仍存在改进的空间。
当更改规则时，现有的代码可能会出现lint错误，因此我们会使用$ yarn lint –fix来修复。

考虑到 import 的顺序很重要，因此在 src/test.ts 中使用 /* tslint:disable:ordered-imports */ 来禁用 TSLint 规则。

stylelint -> 样式规范检查

stylelint.png

为了 SCSS，我们将引入 stylelint 作为 Linter。我们还会一起安装推荐的 standard 规则，以便立即使用。

$ yarn add stylelint stylelint-config-standard -D

使用Angular CLI创建组件时，默认会生成一个空的样式文件。为了允许存在空的样式文件，我们需要准备一个.stylelintrc文件，并将no-empty-source规则禁用。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "no-empty-source": null
  }
}

编译器选项的审查

Angular 应用程序有两个 CompilerOptions，一个是 TypeScript CompilerOptions，另一个是 Angular CompilerOptions。由于它们都需要在 tsconfig.json 中进行配置，因此需要添加所需的规则。

TypeScript编译选项

您可以在此处查看TypeScript的CompilerOptions。

严格

以下是将Typescript规则一次性严格化的规则。以下规则将会生效。

ルール名ルールnoImplicitAny暗黙の any を許可しないnoImplicitThis暗黙の any を返す this 式を許可しないalwaysStrictuse strict をつけるstrictBindCallApply関数の bind, call, apply メソッドのチェックが厳格になるstrictNullChecksnull チェックが厳格になるstrictFunctionTypes関数型のチェックが厳格になるstrictPropertyInitializationclass プロパティの初期値のチェックが厳格になる

从 Angular CLI 的 v9 开始，可以在使用 ng new 命令创建应用程序时指定 –strict 选项，因此可以看出要求进行严格的设置。

不使用未使用的本地变量 / 不使用未使用的参数

当存在未使用的局部变量或参数时，将启用错误规则。

不使用隐式返回

只要函数内的所有条件没有返回值，就会生效错误规则。

Angular编译选项

可以在这里查看 Angular 的 CompilerOptions。
在 v9 中，我们要讨论的两个选项将被默认设置为 true。

全面的模板类型检查

这是一个使绑定表达式对模板文件(*.html)进行验证的规则。

考试安排

單元測試時的選項

默认情况下，npm 脚本会执行 ng test 进行测试，但在这里我们会介绍 ng test 的三个选项。

オプション名説明設定値code-coverageコードカバレッジのレポートtruewatch監視モードfalseprogressビルド中のログ出力false

通过更改angular.json中的test architect选项可以实现配置，但本次我们使用npm脚本来指定选项。
将package.json更改为以下内容。

-    "test": "ng test",
+    "test": "ng test --code-coverage --watch false --progress false",

代码覆盖率

通过使用上述配置，test运行后将显示代码覆盖率。然后，我们将修改”karma.conf.js”文件如下所示，以设置代码覆盖率的阈值。如果测试运行后的代码覆盖率低于阈值，则会报错（或警告）。

     coverageIstanbulReporter: 
       dir: require('path').join(__dirname, './coverage/ng-basis'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true,
+      thresholds: {
+        emitWarning: false, // true にすると閾値に届いていなくてもエラーにならない
+        global: {
+          statements: 100,
+          lines: 100,
+          branches: 100,
+          functions: 100,
+        },
+      },
     },

中国語中对于CI的设定

为了使用 HeadlessChrome 运行 CI，我们需要添加一些设置。关于如何进行设置的说明也可以在“配置CLI以在Chrome中进行CI测试”中找到。

单元测试

由于单元测试是在 Karma 中执行的，因此需要在 karma.config.js 中添加配置。

@@ -35,6 +35,12 @@ module.exports = function(config) {
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
     singleRun: false,
     restartOnFileChange: true,
   });

再将专用的运行命令添加到npm脚本中。

     "start": "ng serve",
     "build": "ng build",
     "test": "ng test --code-coverage --watch false --progress false",
+    "test:ci": "yarn test --browsers=ChromeHeadlessCI",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "stylelint": "stylelint './**/*.scss'",

E2E测试

由于 E2E 测试是由 Protractor 运行的，所以需要准备一个专用的 protractor-ci.conf.js。

const config = require('./protractor.conf').config;

config.capabilities = {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--headless', '--no-sandbox']
  }
};

exports.config = config;

生成指令的选项设置

通常情况下，使用Angular CLI时，创建组件和服务常常使用CLI的generate命令。因此，预计如果能够在生成后自动进行一定程度的代码lint修复等操作，将会提升开发体验（DX）。

@schematics/angular:component 组件

プロパティ説明設定可能な値デフォルト値styleCSS プリプロセッサの指定css, scss, sass, less, stylcsschangeDetectionchange detection strategy の指定Default, OnPushDefaultlintFixlint –fix の指定true / falsefalse

除了 component 之外，还需要为 class、directive、module、pipe、service 设置 lintFix。

@@ -2,6 +2,28 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1, 
   "newProjectRoot": "projects",
+  "schematics": {
+    "@schematics/angular:class": {
+      "lintFix": true
+    },
+    "@schematics/angular:component": {
+      "style": "scss",
+      "changeDetection": "OnPush",
+      "lintFix": true
+    },
+    "@schematics/angular:directive": {
+      "lintFix": true
+    },
+    "@schematics/angular:module": {
+      "lintFix": true
+    },
+    "@schematics/angular:pipe": {
+      "lintFix": true
+    },
+    "@schematics/angular:service": {
+      "lintFix": true
+    }
+  },
   "projects": {
     "ng-basis": {
       "projectType": "application",

默认情况下， s项目 – > ng-basis（项目名称）下配置， 但在多个项目中进行项目管理时，为了将相同的构图规则应用于所有项目，像本例一样在顶层指定会更方便。

生产构建的源映射配置

默认情况下，source map不会输出，但有些情况下可能只想输出而不进行打包。您可以根据“Optimization and source map configuration”中的说明进行以下配置。

"build": {
  ...
  "configurations": {
    "production": {
      ...
      "sourceMap": { "scripts": true, "styles": false, "hidden": true, "vendor": true },
    }
  }
}

重置CSS

将HTML5 Doctor Reset CSS作为Reset CSS使用。
将Reset CSS放置于src/assets/styles/reset.css，并在angular.json的build和test architect的styles中进行加载。

Node.js 版本控制

在进行前端开发时，对于在开发环境中使用的Node.js的版本管理也变得很重要。如果使用asdf或nodenv，只需在项目中放置.node-version文件，该文件会自动切换Node.js的版本，非常方便。

12.13.0

翻新

renovate.png

前端开发变成了一场与包更新战斗。
为了持续的包更新，我们将引入Renovate。
关于如何使用Renovate，请参考https://qiita.com/kasaharu/items/1af74b49e98658cf9a8e！

在中国，原文的汉语译文如下：
在使用 Angular CLI 进行版本升级时，最初安装的包会使用 ng update 命令进行升级，这样才能符合 Angular 的方式，因此在这里我们只会启用自己额外安装的包。例子）renovate.json

只需一个选项，将以下内容以中文原生方式转述：
要将GitHub模板应用于从中创建的仓库，您需要从这个链接处进行设置。

这是个解决问题的好机会。

为了实现自动化检查格式、检查错误、构建和测试，我们将引入CI。我们选择了CircleCI。在应用于基于GitHub模板创建的存储库之前，需要在CircleCI仪表板上进行”添加项目”操作，所以我们决定改用无需额外设置的GitHub Actions。如果选择使用CircleCI，可以参考.circleci/config.yml文件。

GitHub Actions 的配置如下：

name: Node CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v1

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Get yarn cache
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.OS }}-yarn-

      - name: yarn install
        run: |
          yarn
        env:
          CI: true

      - name: TSLint
        run: |
          yarn lint
        env:
          CI: true

      - name: stylelint
        run: |
          yarn stylelint
        env:
          CI: true

      - name: format
        run: |
          yarn prettier:check
        env:
          CI: true

      - name: build
        run: |
          yarn build --prod
        env:
          CI: true

      - name: unit test
        run: |
          yarn test:ci
        env:
          CI: true

      - name: Archive code coverage results
        uses: actions/upload-artifact@v1
        with:
          name: code-coverage-report
          path: coverage

      - name: e2e test
        run: |
          yarn e2e:ci
        env:
          CI: true

部署

应用程序最终需要部署。
这次我们决定将它部署到GitHub Pages上。
为了在GitHub Pages上部署，我们将使用angular-cli-ghpages这个包。
您可以通过以下方式安装该包： $ ng add。

$ yarn ng add angular-cli-ghpages

执行以下命令即可将其部署到 https://kasaharu.github.io/ng-basis 上，部署非常简单。

$ yarn ng deploy --base-href=/ng-basis/

总的来说

本次我分享了一个关于为 Angular 应用程序创建 GitHub 模板的故事，不需要编写代码就可以进行部署。
在这个过程中，我将前端开发中最先要做的事情和制作 Angular 应用程序时需要设置的便利内容都包括了进去。
Angular 和各种包将定期进行更新。
结束。

明天是@ver1000000先生。

请参考以下链接。

    • テンプレートからリポジトリを作成する

 

    • TypeScript Compiler Options

 

    • Angular コンパイラオプション

 

    • add strict compiler option to workspace tsconfig

 

    • Configure CLI for CI testing in Chrome

 

    • GitHub Page を使う

 

    • HTML5 Doctor Reset CSS

 

    diescake/igata