搭建 react + typescript + ant design 開發環境

lyreal666發表於2019-05-10
ReactTypeScript開發環境

9102 年了，前端工程化發展在 nodejs 的基礎上已經發展的非常完善了，各種前端構建工具層出不窮。ES6 編譯器 babel，css 輔助工具 postcss/scss/less，程式碼風格檢測工具 eslint/prettier/stylelint，git 輔助工具 husky/lint-staged/commitizen/commitlint/，打包工具 webpack/gulp/grunt，測試工具 jest/mocha 等等。這麼多構建工具每次寫專案都去配置一遍那也太浪費時間了，自己維護一套模板有得時不時去更新。比較方便的配置開發環境還是使用 cli 或者一些熱門的 bolierplate。本篇文章將以 react 官方維護的 cli 工具 create-react-app （簡稱 cra）為基礎，以不 eject 的方式去配置 ant design，以及一些 cra 並沒有內建的輔助工具。

初始化專案並新增 typescript 支援

Typescript 在近兩年以驚人的速度被越來越多的開發者和開源專案所採用，我在使用 typescript 開發了一個專案之後也被 typescript 圈粉了。使用 typescript 開發帶來的智慧提示可以很大程度上杜絕手賤的發生，大多數情況我們都不需要查文件了，以及 typescript 中的一些 javascript 中沒有的語法特性如列舉，使得專案組織可以非常的優雅。從 angular2 預設使用 typescript 開發，到如今 vue3 使用 typescript 重寫也能看出 typescript 在前端界的地位將越來越重要。9102，除非是非常小的專案，否則上 typescript 絕對是明智之舉。

我的開發環境：

node: 10.15.3 LTS

yarn: 1.15.2

editor: visual studio code

cra 內建了 typescript 支援，只需要在初始化專案時指定 --typescript 引數即可。

npx create-react-app my-app --typescript

# or

yarn create react-app my-app --typescript
複製程式碼

如果 cra 專案已經存在，先安裝以下 ts types 依賴：

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest
複製程式碼

然後將 .js 結尾的檔案重新命名為 .tsx 即可。

更多關於在 cra 中使用 ts 的資訊檢視官方文件：Adding TypeScript

配置 ant design

安裝 ant design 依賴

現在從 yarn 或 npm 安裝並引入 antd。

$ yarn add antd
複製程式碼

配置 ant design css 按需載入

配置 css 按需載入的方式有很多，歸根到底就是修改 cra 的 webpack 配置。可以採用暴露 cra webpack 配置的方式，使用 yarn eject 命令即可在專案根目錄下暴露出專案的 webpack 配置，配置儲存在 config 資料夾下面。我記得 cra 早期版本 eject 之後暴露的配置是拆分成兩份 webpack.config.dev.js，webpack.config.prod.js。最新的 cra 配置被合併到一個配置檔案裡面了，就一個配置檔案，通過一個計算出的環境（development/producation）來動態生成 webpack 配置，這種方式我覺得配置起來更麻煩了，而且eject 是不可逆的，採用 eject 來修改 webpack 配置需要慎重考慮。這種方式的好處就是 webpack 配置你可以直接修改，所以基本上沒什麼配置不能通過這種方式來載入。

這裡我採用社群的 cra 配置解決方案：react-app-rewired。

引入 react-app-rewired 並修改 package.json 裡的啟動配置。由於新的 react-app-rewired@2.x 版本的關係，你還需要安裝 customize-cra。

$ yarn add react-app-rewired customize-cra
複製程式碼
/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
	"eject": "react-scripts eject"
}
複製程式碼

在專案根目錄新建 config 資料夾，並在 package.json 中新增配置：

"config-overrides-path": "config/config-overrides.js"
複製程式碼

然後再在其中建立一個 config-overrides.js 用於修改預設配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
複製程式碼

使用 babel-plugin-import

babel-plugin-import 是一個用於按需載入元件程式碼和樣式的 babel 外掛（原理），現在我們嘗試安裝它並修改 config-overrides.js 檔案。

$ yarn add babel-plugin-import
+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );
複製程式碼

按下面的格式引入 ant design 元件。

  // src/App.js
  import React, { Component } from 'react';
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }

  export default App;
複製程式碼

最後重啟 yarn start 訪問頁面，antd 元件的 js 和 css 程式碼都會按需載入，你在控制檯也不會看到這樣的警告資訊。關於按需載入的原理和其他方式可以閱讀這裡。

自定義主題

按照 配置主題 的要求，自定義主題需要用到 less 變數覆蓋功能。我們可以引入 customize-cra 中提供的 less 相關的函式 addLessLoader 來幫助載入 less 樣式，同時修改 config-overrides.js 檔案如下。

$ yarn add less less-loader
複製程式碼
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);
複製程式碼

這裡利用了 less-loader 的 modifyVars 來進行主題配置， 變數和其他配置方式可以參考 配置主題 文件。

修改後重啟 yarn start。

新增 sass 支援

react-scripts@2.0.0 內建了 sass 支援，我們只需要安裝 node-sass 依賴即可。

$ npm install node-sass --save
$ # or
$ yarn add node-sass
複製程式碼

然後就可以把專案模板中的 css 檔案字尾改成 .scss 了。注意是 .scss 不是 .sass 哦，.sass 是 yml 的寫法。

新增 editorconfig

editorconfig 幫助我們約束多個開發者在同一個專案中程式碼風格，更重要的是它是跨編輯器，IDE 的。

在 vscode 中使用時可以安裝 EditorConfig for VS Code 外掛，然後 ctrl + shift + p 調出命令皮膚，輸入 editorconfig 就可以看到 Generator .editorconfig 命令，選擇命令後根目錄就會生成初始的 .editorconfig 檔案。

新增 nvmrc

在專案根目錄建立檔案 .nvmrc，再將 node -v 的結果複製進去就可以了。或者直接在專案根目錄執行下面的命令。

$ node -v > .nvmrc
複製程式碼

新增 .gitignore

cra 預設已經幫我們新增了 .gitignore，我們可以再新增一些比如 src/assets/videos/*。使用 vscode 的外掛 gitignore 我們可以很方便的追加其它要忽略的檔案，比如可以選擇再新增 VisualStudioCode，Windows 的忽略檔案。

配置 linters

ESLint

ESLint 可以約束團隊成員的程式碼風格，並且找出一些容易產生問題的程式碼。vscode 中安裝 ESLint 後可以在 PROBLEMS 皮膚中看到 ESLint 提示的各種錯誤。ESLint 自帶的 autoFix 也挺好用的，不過我一般會直接讓 prettier 去在提交程式碼時格式化一遍。

cra 預設整合了 ESLint，要讓編輯器正確提示 ESLint 錯誤，需要在專案根目錄新增 .eslintrc.json。內容如下：

{
  "extends": "react-app"
}
複製程式碼

為了讓 vscode 的 eslint 外掛啟用 typescript 支援，需要新增下面的配置到 .vscode/settings.json 中。

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]
}
複製程式碼

整合 prettier

Prettier is an opinionated code formatter

opinionated 有武斷，自以為是的意思，這裡應該理解為 prettier 提供的配置很少，有點強制約定程式碼風格的意思。

使用 prettier 來格式化我們的程式碼建議在 git commit 時自動觸發就好了，要給 git 設定鉤子，我們可以使用 husky 工具。

npm install --save husky lint-staged prettier
複製程式碼

lint-staged 是一個提高 lint 工具速度的工具，他的作用就和它的名字一樣，lint-staged 可以讓 lint 工具只 lint 儲存在 stage 區的程式碼，從而加快 lint 速度。

接著配置 husky 和 lint-staged。在 package.json 中加入下面內容。

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --single-quote --write",
      "git add"
    ]
  },
複製程式碼

如果還需要配置 prettier，在專案根目錄新增配置檔案 .prettierrc.js。內容如下：

// prettier.config.js or .prettierrc.js
module.exports = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: false,
    singleQuote: true
};
複製程式碼

整合 stylelint

stylelint 我主要參考了 ant design 的配置。

yarn add -D stylelint
複製程式碼

在根目錄新增 stylelint 配置檔案 .stylelintrc.json 或者 package 新增欄位 "stylelint"，內容如下：

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
  "rules": {
    "comment-empty-line-before": null,
    "function-name-case": ["lower"],
    "no-invalid-double-slash-comments": null,
    "no-descending-specificity": null,
    "declaration-empty-line-before": null
  },
    "ignoreFiles": []
}
複製程式碼

安裝上面配置中使用的外掛。

yarn add -D stylelint-config-standard stylelint-config-rational-order stylelint-config-prettier stylelint-order stylelint-declaration-block-no-ignored-properties
複製程式碼

修改 lint-staged 配置為：

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --single-quote --write",
      "git add"
    ],
    "src/**/*.css": "stylelint",
    "src/**/*.scss": "stylelint --syntax=scss"
},
複製程式碼

配置 commitlint

安裝校驗工具 @commitlint/cli。

yarn add - D@commitlint/cli
複製程式碼

安裝符合Angular風格的校驗規則。

yarn add -D @commitlint/config-conventional 
複製程式碼

package.json 新增 "commitlint" 欄位並設定：

"commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
}
複製程式碼

package.json 中 husky 配置修改為：

"husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
},
複製程式碼

最後

新增一些常用的資料夾。我一般預設新增 components，pages，stores，utils，styles 這幾個資料夾。做到這裡，我們的專案的開發環境算是配置好了，接下來你應該修改 cra 生成的模板專案的網站圖示和全域性樣式等，然後進行業務開發。

我有個完全按照上面的步驟配置好的專案：mini-shop，需要的可以檢視我第二次提交時的程式碼，因為 cra 預設幫我們提交了一次，我配置完開發環境再提交就是第二次了。

參考資料：

  1. create-react-app 官方文件
  2. Cz工具集使用介紹 - 規範Git提交說明

相關文章