create-react-app开发npm组件

> [create-react-app 官方文档](https://create-react-app.dev/)

> [rollup打包组件库](https://juejin.cn/post/7144365208646418462)

### 包含功能
- typescript
- stylelint
- prettier
- eslint
- [husky](https://www.npmjs.com/package/husky)
    - git钩子
- styled-components
- [react-app-rewired ](https://github.com/timarney/react-app-rewired)
    - 调整 `create-react-app webpack` 配置而不使用 `'eject'` 并且不创建 `react-scripts` 的分支。
    - 没有“无配置”限制的 `create-react-app` 的所有好处。您可以根据需要添加插件、加载程序。
- [customize-cra](https://github.com/arackaf/customize-cra) 依赖于`react-app-rewired`, 您需要安装它才能`customize-cra`工作, 增加`babel-plugin-import`配置动态引入`Antd`组件
- babel-plugin-import
    - babel 模块化导入插件，兼容`antd`、`antd-mobile`、`lodash`、`material-ui`等。
- antd
- ahooks

### 安装create-react-app
```
npx create-react-app my-app --template typescript
```
或者
```
yarn create react-app my-app --template typescript
```

### 安装`antd`和定制化`Create-React-App`项目的两个包
```
npm install antd --save
npm install babel-plugin-import react-app-rewired customize-cra --save-dev
```

根目录创建`config-overrides.js`，用`customized-cra`来增加`babel-plugin-import`配置动态引入`Antd`组件

```
const { override, fixBabelImports } = require('customize-cra');

module.exports = override(fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true, // true: 源文件被导入，并且可以在编译期间进行优化. css: 预捆绑的 css 文件将按原样导入
  })
);
```

替换package.json中的npm scripts，这里原本的eject无需替换，react-app-rewired并不提供该功能
```
  /* 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 --env=jsdom",
   "test": "react-app-rewired test --env=jsdom"
}
```

### 如何查看create-react-app自带的依赖配置呢？
使用`npm run eject` , `npm run eject`的作用就是将原有隐藏的依赖（比如`Webpack, Babel, ESLint`等）暴露出来， 请注意这是不可逆的行为

### 安装stylelint和其它依赖
- [stylelint-config-prettier](https://www.npmjs.com/package/stylelint-config-prettier) 关闭所有不必要的或可能与 Prettier 冲突的规则。这使您可以使用自己喜欢的可共享配置，而不会在使用 Prettier 时让其风格选择成为障碍。
- [stylelint-config-recommended](https://www.npmjs.com/package/stylelint-config-recommended) 它会启用所有帮助您避免错误的 Stylelint 规则。按原样使用它或作为您自己配置的基础。
- [stylelint-order](https://www.npmjs.com/package/stylelint-order) 规则插件包。每个规则都支持自动修复 ( stylelint --fix)
- [stylelint-config-standard](stylelint-config-standard) Stylelint 的标准可共享配置
```
npm install stylelint stylelint-config-prettier stylelint-config-recommended stylelint-order stylelint-config-standard --save-dev
```

根目录创建`.stylelintrc`文件
```
{
  plugins: [
    'stylelint-order'
  ],
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "rules": {
    "function-name-case": [
      "lower"
    ],
    "function-no-unknown": [
      true,
      {
        "ignoreFunctions": [
          "fade",
          "fadeout",
          "tint",
          "darken",
          "ceil",
          "fadein",
          "floor",
          "unit",
          "shade",
          "lighten",
          "percentage",
          "-"
        ]
      }
    ],
    "indentation": 2,
    "import-notation": null,
    "no-descending-specificity": null,
    "no-invalid-position-at-import-rule": null,
    "declaration-empty-line-before": null,
    "keyframes-name-pattern": null,
    "custom-property-pattern": null,
    "number-max-precision": 8,
    "alpha-value-notation": "number",
    "color-function-notation": "legacy",
    "selector-class-pattern": null,
    "selector-id-pattern": null,
    "selector-not-notation": null
  }
}
```

### 安装styled-components和其它依赖
- [stylelint-processor-styled-components](https://github.com/styled-components/stylelint-processor-styled-components) 从中提取样式样式组件
- [stylelint-config-styled-components](https://github.com/styled-components/stylelint-config-styled-components) 禁用与冲突的 stylelint 规则样式组件

```
# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

# 依赖
npm install --save-dev stylelint-processor-styled-components stylelint-config-styled-components
```

### 安装prettier和其它依赖
- [stylelint-config-prettier](https://www.npmjs.com/package/stylelint-config-prettier) 关闭所有不必要的或可能与 Prettier 冲突的规则
- [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier) 关闭所有不必要的或可能与 [Prettier] 冲突的规则
- [eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier) 将Prettier作为ESLint规则运行，并将差异报告为单个 ESLint 问题

```
npm install --save-dev prettier stylelint-config-prettier eslint-config-prettier eslint-plugin-prettier
```

```
// package.js 添加format
"scripts": {
    "format": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|md)\""
},
"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
},
```

根目录创建`.prettierrc.js`和`.prettierignore`文件
```
// .prettierrc.js
module.exports = {
  tabWidth: 2,
  semi: false,
  trailingComma: 'es5',
  jsxSingleQuote: false,
  endOfLine: 'auto',
  singleQuote: true,
}

// .prettierignore
build/
dist/
package-lock.json
node_modules
public
README.md
```

### 安装eslint和其它依赖
默认create-react-app已经安装了eslint, 开启方法在根目录创建`.eslintrc.js`文件

安装

- `eslint-config-react-app` 该软件包包括`Create React App` 使用的可共享 `ESLint` 配置
- `eslint-webpack-plugin` 此插件用于eslint查找和修复 JavaScript 代码中的问题, 这是 `eslint-webpack-plugin 3.0`，仅适用于 `webpack 5`
- `@typescript-eslint/parser` 一个 ESLint 解析器，它利用TypeScript ESTree允许 ESLint 对 TypeScript 源代码进行 lint。
- `@typescript-eslint/recommended` 一个 ESLint 插件，它为 TypeScript 代码库提供 lint 规则。(全局引用.d.ts)

```
npm install --save-dev eslint eslint-config-react-app eslint-webpack-plugin
```
- [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) 这个包提供了 Airbnb 的 .eslintrc 作为可扩展的共享配置

```
npm install --save-dev eslint-config-airbnb
```

根目录创建`.eslintrc.js`和`.eslintignore`文件
```
// .eslintrc.js
module.exports = {
  extends: [
    'eslint:all',
    'react-app', //  react帮配置好了一些语法，譬如箭头函数
    'airbnb',
    'plugin:@typescript-eslint/recommended', // 一个 ESLint 插件，它为 TypeScript 代码库提供 lint 规则。
    'plugin:prettier/recommended', // prettier配置
  ],
  plugins: ['react', 'react-hooks', '@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  rules: {
    camelcase: 0,
    'import/no-extraneous-dependencies': 0,
    'import/extensions': 'off',
    'import/no-unresolved': 0,
    'import/prefer-default-export': 0,
    'default-param-last': 0,
    'react/react-in-jsx-scope': 'off',
    'react/jsx-filename-extension': [
      1,
      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    ], // 关闭airbnb对于jsx必须写在jsx文件中的设置
    'react/prop-types': 'off', // 关闭airbnb对于必须添加prop-types的校验
    'react/destructuring-assignment': [
      1,
      'always',
      {
        ignoreClassFields: false,
      },
    ],
    'react/jsx-one-expression-per-line': 'off', // 关闭要求一个表达式必须换行的要求，和Prettier冲突了
    'react/jsx-wrap-multilines': 0, // 关闭要求jsx属性中写jsx必须要加括号，和Prettier冲突了
    // 'comma-dangle': ['error', 'never'],
    'react/jsx-first-prop-new-line': [1, 'multiline-multiprop'],
    'react/prefer-stateless-function': [0, { ignorePureComponents: true }],
    'jsx-a11y/no-static-element-interactions': 'off', // 关闭非交互元素加事件必须加 role
    'jsx-a11y/click-events-have-key-events': 'off', // 关闭click事件要求有对应键盘事件
    'no-bitwise': 'off', // 用位操作符
    'react/jsx-indent': [2, 2],
    'react/jsx-no-undef': [2, { allowGlobals: true }],
    'jsx-control-statements/jsx-use-if-tag': 0,
    'react/no-array-index-key': 0,
    'react/jsx-props-no-spreading': 0,
    'no-param-reassign': 0, // redux/toolkit使用immer库, 保证数据不被修改
    // 禁止使用 var
    'no-var': 'error',
    // 可以使用 debugger
    // 'no-debugger': 'off',
    // semi: ["error", "never"],
    quotes: [2, 'single'],
    // @fixable 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
    eqeqeq: [
      'warn',
      'always',
      {
        null: 'ignore',
      },
    ],
    'no-use-before-define': ['off', { functions: false }],
    // 'no-use-before-define': ['error', { functions: false }],
    'prettier/prettier': ['error', { parser: 'typescript' }],
  },
}
// .eslintignore
src/**/test/**
/build
/dist
/types
.eslintrc.js
/public
```

### 安装husky钩子
[官方文档](https://typicode.github.io/husky/#/?id=automatic-recommended)

```
npm install husky --save-dev
```

### 跳过Git提交校验( `lint-staged` 和 `husky` 提交 `git` 校验 )

跳过 `lint-staged` , 提交的时候校验

```
// .lintstagedrc
{
  "*.{ts,tsx}": [] // "eslint --fix", "stylelint --fix", "prettier --write"
}
```

跳过 `husky` , 推送的时候校验

删除根目录下的 `.git -> hooks -> pre-commit.sample ` 文件

Leanote's Blog

Navigation

Recent Posts

Friend Links