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

時間 2019-11-17

標籤搭建 react typescript ant design 開發環境欄目 React 简体版

原文原文鏈接

9102 年了，前端工程化發展在 nodejs 的基礎上已經發展的很是完善了，各類前端構建輔助工具層出不窮。ES6 編譯器 babel，css 輔助工具 postcss / sass / less，代碼風格檢測工具 eslint / prettier / stylelint，git 輔助工具 husky / lint-staged / commitizen / commitlint，自動化構建工具 webpack / gulp / grunt，測試工具 jest / mocha 等等。javascript

這麼多開發輔助工具每次寫項目都去配置一遍那也太浪費時間了，本身維護一套模板有得時不時去更新。比較方便的配置開發環境仍是使用 cli 或者一些熱門的 bolierplate。本篇文章將以 react 官方維護的 cli 工具 create-react-app （簡稱 cra）爲基礎，以不 eject 的方式去配置 ant design，以及一些 cra 並無內置的輔助工具。css

初始化項目並添加 typescript 支持

Typescript 在近兩年以驚人的速度被愈來愈多的開發者和開源項目所採用，我在使用 typescript 開發了一個項目以後也被 typescript 圈粉了。使用 typescript 開發帶來的智能提示能夠很大程度上杜絕手賤的發生，大多數狀況咱們都不須要查文檔了，以及 typescript 中的一些 javascript 中沒有的語法特性如枚舉，使得項目組織能夠很是的優雅。從 angular2 默認使用 typescript 開發，到現在 vue3 使用 typescript 重寫也能看出 typescript 在前端界的地位將愈來愈重要。9102，除非是很是小的項目，不然上 typescript 絕對是明智之舉。html

個人開發環境：前端

node: 10.15.3 LTSvue

yarn: 1.15.2java

editor: visual studio codenode

cra 內置了 typescript 支持，只須要在初始化項目時指定 --typescript 參數便可。react

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

# or

yarn create react-app my-app --typescript
複製代碼

若是 cra 項目已經存在，先安裝如下 ts types 依賴：webpack

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 便可。git

更多關於在 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 依賴便可。

$ 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 工具。

yarn add -D 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 能夠配置的選項不多。內容以下：

// 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

推薦一個能夠實現規範的提交說明的工具：commitizen/cz-cli。全局安裝該工具：

yarn global add commitizen
複製代碼

該工具的使用方式能夠文章最後的提交代碼時的 GIF 圖。使用時輸入 git cz 便可。

安裝校驗工具 @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"
        }
},
複製代碼

調整模板

這篇文章是我邊配置個人一個項目邊寫的，下面部分有些內容是根據我這個項目技術棧來配置的，後面的內容自行斟酌按需配置。好比我打算用 react hooks 寫項目，那麼能夠安裝 react-use 這個工具庫，不打算使用 react hooks 就不要安裝了。

添加經常使用文件夾

項目根目錄添加 docs 文件夾用來放文檔。在 src 目錄下添加 assets（存放資源），components（放組件），pages（頁面組件），stores（狀態管理工具相關的文件），models（typescript 類或者接口），utils，styles（全局樣式主題等）這幾個文件夾。assets 文件夾下面還有 images，videos 等，components 和 pages 目錄下加入 index.tsx 用來導出全部 component 和 page。

刪除無用文件和內容

public/manifest.json 是用來作 PWA 的，不搞 PWA 能夠刪掉。修改 public/index.html 中的首頁標題。App.scss 中的內容能夠全刪了。src/logo.svg 能夠刪了。刪除 App.tsx 的無用代碼。cra 生成的默認 README.md 中的內容也全刪了，加入本身的項目描述。

替換網站圖標 favicon.ico

推薦使用 iconfx 工具製做 ico 格式的圖標。iconfx 使用方式很簡單，打開軟件就會用。能夠直接將圖片轉成 ico 格式的圖標。將製做好的圖標替換 public/favicon.ico 便可設置好網站圖標。

添加其它依賴

安裝 react-router-dom，classnames，lodash，react-use，constate，faker.js 等工具庫和對應的 types 文件，有些自帶了類型聲明的庫就不用安裝 types 了。像 react-use 和 constate 自己就是 typescript 編寫的就不用安裝對應的 types 了。安裝 normalize.css 並在 index.tsx 直接導入。

作到這裏，個人項目的開發環境算是配置好了,而後就能夠進行業務開發了。

個人一個徹底按照上述步驟配置的項目：mini-shop。有須要能夠直接去看個人配置，通常來講配置不會常常改動。

看看配置了上面那些工具提交代碼時是啥樣子的：