创建 Ionic & Angular 项目

创建 Ionic 应用

创建 Ionic 应用

创建一个空白应用，并跳过依赖安装：

ionic start <app> blank --cordova --type=angular --no-deps

Tips: 创建的应用使用 Cordova 平台，使用 Angular 框架，并自带 Git 仓库。

安装配置 Angular CLI

使用 Yarn 全局安装 Angular CLI：

yarn global add @angular/cli

查看安装的 Angular CLI 版本：

ng version

......

Angular CLI: 8.3.21 Node: 12.13.1 OS: darwin x64 ......

设置 Yarn 为默认 Node.js 包管理工具：

ng config --global cli.packageManager yarn

安装项目依赖

进入项目目录，创建 npm 配置文件：

touch .npmrc

插入 npm 配置：

echo "registry=https://registry.npm.taobao.org" >> .npmrc

使用 Yarn 安装依赖：

yarn

配置 Git 仓库

在 Git 仓库托管平台（Github、Gitee 等）创建空的 Git 仓库（不勾选初始化）。

进入应用目录，添加远程仓库，并标记为 origin：

git remote add origin <repository>

将本地 master 分支推送到 origin/master，并建立追踪关系：

git push -u origin master

移除测试内容

如果项目不需要 E2E 测试和单元测试，可以移除相关依赖和文件。

移除相关依赖

移除 jasmine、karma、protractor 相关依赖：

yarn remove @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter protractor

删除相关文件

rm -rf karma.conf.js tsconfig.spec.json e2e src/test.ts src/**/*.spec.ts

修改 Angular 配置

打开 Angular 配置文件 angular.json ，找到 projects.app.schematics 配置项，其值替换为：

{
  "@schematics/angular:component": {
    "style": "scss",
    "skipTests": true
  },
  "@schematics/angular:class": {
    "skipTests": true
  },
  "@schematics/angular:directive": {
    "skipTests": true
  },
  "@schematics/angular:guard": {
    "skipTests": true
  },
  "@schematics/angular:module": {
    "skipTests": true
  },
  "@schematics/angular:pipe": {
    "skipTests": true
  },
  "@schematics/angular:service": {
    "skipTests": true
  }
}

找到 projects.app.architect 配置项，删除下面 test 和 e2e 节点内容，其下面 lint.options.tsConfig 值替换成 ["tsconfig.app.json"] 。

代码质量管理

Prettier

如需格式化代码，让所有代码风格保持一致，可安装最新版的 Prettier 和 TSLint 插件：

yarn add prettier tslint-config-prettier tslint-plugin-prettier --dev --tilde

在 TSLint 配置文件 tslint.json 中添加对应配置：

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rulesDirectory": ["codelyzer", "tslint-plugin-prettier"],
  "rules": {
    "prettier": true
  }
}

在项目根目录创建 Prettier 配置文件 .prettierrc 并写入配置：

{
  "singleQuote": true
}

Tips: Prettier 配置如果放在 tslint.json 中会导致 Webstorm Prettier 插件无法识别出来。

Husky

如需在 Git 提交前强制进行 Lint 检查，可安装 Husky 在 Git 提交前添加钩子：

yarn add husky --dev --tilde

打开 package.json ，添加配置：

"husky": {
  "hooks": {
    "pre-commit": "ng lint"
  }
}

在 Git 提交前会自动进行 Lint 检查，不通过会报错阻止提交。

参考文献

• Ionic CLI

• CLI 概览与命令参考手册

• Usage - TSLint

• tslint-config-prettier

• tslint-plugin-prettier

• Husky