構建 Angular v13 的開發環境

2 年 ago
科, 雅
3 minutes

这篇文章是 Angular Advent Calendar 2021 的第一天文章。

先月4日，Angular v13发布了。周边工具和库如angular-eslint和NgRx也纷纷升级到v13，现在可以进行最新版本的迁移或准备开始使用了。

本文将解释如何使用Angular v13设置应用程序的步骤。

初始化

让我们使用Angular CLI创建项目。
请确保已安装Node.js v12.20.0〜 / v14.15.0〜 / v16.10.0〜。

npx @angular/cli@latest new my-app

在行程中会多次被问到与设置相关的必要事项，请适时回答。

Need to install the following packages:
  @angular/cli
Ok to proceed? (y) y
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS

让我们切换到工作目录。

cd my-app

配置 Lint

在初始状态下，未安装 Linter。使用 angular-eslint 的 Schematics 吧。

npx ng add @angular-eslint/schematics

ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@13.0.1.
✔ Package information loaded.

The package @angular-eslint/schematics@13.0.1 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.

    All @angular-eslint dependencies have been successfully installed ?

    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.


    We detected that you have a single project in your workspace and no existing linter wired up, so we are configuring ESLint for you automatically.

    Please see https://github.com/angular-eslint/angular-eslint for more information.

CREATE .eslintrc.json (984 bytes)
UPDATE package.json (1444 bytes)
UPDATE angular.json (3501 bytes)
✔ Packages installed successfully.

根据最新的更新，似乎在执行 ng lint 命令时会被要求进行安装。详见：https://github.com/angular/angular-cli/pull/22203。

端到端测试

过去一直使用Protractor进行E2E测试，但从v12开始，在创建新项目时不再添加。这里我们将使用Cypress作为示例。需要注意的是，Protractor将在2022年底停止开发，当Angular v15发布时。

npx ng add @cypress/schematic 

ℹ Using package manager: npm
✔ Found compatible package version: @cypress/schematic@1.6.0.
✔ Package information loaded.

The package @cypress/schematic@1.6.0 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Would you like the default `ng e2e` command to use Cypress? Yes
CREATE cypress.json (298 bytes)
CREATE cypress/tsconfig.json (139 bytes)
CREATE cypress/integration/spec.ts (178 bytes)
CREATE cypress/plugins/index.ts (180 bytes)
CREATE cypress/support/commands.ts (1377 bytes)
CREATE cypress/support/index.ts (651 bytes)
UPDATE package.json (1597 bytes)
UPDATE angular.json (4354 bytes)
✔ Packages installed successfully.

单元测试（可选）

经过上述步骤，现在可以使用 npm run lint 和 npm run e2e。在 Angular 中，目前采用了 Karma 进行单元测试，但通过使用 jest-preset-angular，可以使用 Jest 来执行测试。

卸载Karma并安装Jest。

npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

npm install -D @types/jest jest jest-preset-angular

更换设置文件。

rm karma.conf.js src/test.ts

echo "import 'jest-preset-angular/setup-jest';" >> src/setup-jest.ts

echo "module.exports = {\n  preset: 'jest-preset-angular',\n  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],\n  testMatch: ['<rootDir>/src/**/+(*.)+(spec|test).+(ts|js)?(x)'],\n};" >> jest.config.js

更新 tsconfig.spec.json 中的 types 和 files。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest"
    ]
  },
  "files": [
    "src/polyfills.ts",
    "src/setup-jest.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

让我们最后修改 package.json 文件中的测试脚本。

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },

执行 npm test 将会启动 Jest。

npm test

> my-app@0.0.0 test
> jest

 PASS  src/app/app.component.spec.ts
  AppComponent
    ✓ should create the app (149 ms)
    ✓ should have as title 'my-app' (35 ms)
    ✓ should render title (39 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        4.264 s
Ran all test suites.

如果在测试运行时出现如下警告的情况，请使用以下方式。

ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.

请在 tsconfig.json 的 compilerOptions 中添加 “esModuleInterop”: true。

{
  "compilerOptions": {
    ...
    "esModuleInterop": true,
  },
}

VS Code 插件（*任意）

请安装 Angular Language Service。
https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

从 Angular CLI 的 Pull Requests 可以看出，未来在使用 VS Code 打开项目时，Angular Language Service 会作为推荐的扩展显示出来。
GitHub 链接：https://github.com/angular/angular-cli/pull/22167

浏览器扩展（※可选）

让我们安装Angular DevTools。

对于组件的调试和性能测量非常有用。

最后一句话

2021年即将结束，最近Angular做了一些新的尝试，比如停止支持IE，采用esbuild，并加强了对Tailwind CSS的支持。这些新试验看起来很有趣。如果你还没接触过Angular或对它感兴趣，不妨参考本文开始你的Angular之旅。

此外，我正在贡献的 Nx 不仅支持 Angular CLI 的功能，还支持单一存储库管理以及 Next.js / NestJS / Jest / Cypress / Storybook 等，因此可以通过一个命令轻松创建像本次介绍的开发环境，非常方便。

npx create-nx-workspace workspace --preset=angular --appName=my-app

请务必试一试这个。那么，祝你新年快乐?

✖
广告
将在 10 秒后关闭
bannerAds