介紹一下個人目前在自己公司研究的如何初始化 Repository 的方法並從零開始建立套件 Repository，所以這篇會很詳細，因為我平常建立新專案也都會這麼做。而那些詳細的部分我會標注「可選」，以方便快速找到所需。
而這篇只會先寫如何初始化建立 Repo 而已。

緣由：

因為碰到一個特別的需求，有一個主力的產品需要拆分成為許多的模組，然後在提供產品的階段，要可以提供極度客製化的功能，也就是說，我可以根據需求，把幾個模組拼一拼，就可以變成一個客製化產品，也因此我就多練習了非常多的建立 repository 的機會，我也趁這個機會把這些記錄下來。
這次用到的有 React app、ESlint、Prettier、husky、lint-staged 搭配 babel 打包成 package 以供外部使用，Babel 會另外開一篇寫。
接著就進入正題吧。

安裝 React app

輸入 yarn create react-app [名稱] 建立一個初始化的 react app 或是輸入 yarn create react-app . 在原資料夾新增 React app。

移除此專案用不到的部分(可選)

刪除用不到的 package yarn remove @testing-library/jest-dom @testing-library/react @testing-library/user-event web-vitals
在 package.json 加上一些設定 contributors 是貢獻者，通常我都會寫一下。

"private": true,  <-- 是不是私人，如果是自己公司內部用設為 true
"license": "UNLICENSED",  <-- 授權，如果是自己公司內部用可以用 UNLICENSED
"contributors": [
   "Hugh <u88803494@gmail.com>"
]

在 package.json 刪除用不到的部份，其實就是刪除這次專案用不到的部分，不一定要做。

  "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest" <--- 刪除
     ]
   },
  ...
    "scripts": {
     "eject": "react-scripts eject",  <--- 刪除
     "test": "react-scripts test",  <--- 刪除
   },

README.md 清空內容，改加上簡單的內容，也就是方便以後要寫的 README

# Package name

## development
yarn start

刪除 public 底下除了 index.html 之外的所有檔案。
index.html 的內容只留下如下內容，title 的 tag 改成專案名稱，meta name="description" 的 content 改成專案名稱：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="MMRM base module" />
    <title>MMRM base module</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

刪除 src 資料夾底下用不到的檔案，只留下 App.js 跟 index.js，並把副檔名改成 .jsx。
App.jsx 刪除無用內容，只留下如下內容，專案名稱請自行修改：

import React from 'react';

const App = () => (
  <div>
    MMRM frontend [專案名稱]
  </div>
);

export default App;

index.jsx 刪除無用內容，只留下如下內容：

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

ESlint

因為ESlint 跟 React 裝好的 package 有可能會衝突，所以如果衝突的話，這邊就把要把相關內容刪除重新安裝才可以開始安裝 ESlint。

安裝 ESlint yarn add -D eslint
初始化 ESlint yarn run eslint --init
選擇對應選項(可選，不一定要參考我的選項)：

How would you like to use ESLint?
To check syntax, find problems, and enforce code style

What type of modules does your project use?
JavaScript modules (import/export)

Which framework does your project use?
React

Does your project use TypeScript?
No

Where does your code run?
Browser

How would you like to define a style for your project?
Use a popular style guide

Which style guide do you want to follow?
Airbnb

What format do you want your config file to be in?
YAML

然後就會看到 The config that you've selected requires the following dependencies，請選 Yes。這邊這段意思是需要他列出的依賴項，但這邊會有個問題是他會直接用 npm 安裝，無論你是用 yarn 或是 npx 啟動初始化，這個問題下步驟解決。
刪除 package-lock.json 、 yarn.lock、node_modules 然後重新安裝 yarn install。
打開 .eslintrc.yml 添加設定如下：

...
extends:
  - eslint:recommended <-- 新增這項
  - plugin:react/recommended
  - airbnb

...

parserOptions:
  ...
  ecmaVersion: latest <-- 原本的改成 latest 
  ...

...

rules: {
  eqeqeq: [2, always],
  no-console: warn,
  no-restricted-exports: [off],
  react/function-component-definition: [2, { "namedComponents": "arrow-function" }]
}

這邊加了一些我自己喜歡的規則，像是強制所有都用等號、強制使用 arrow function 作為 component。

新增 .eslintignore 並添加內容：

# dependencies
/node_modules

# production
/build
/dist

打開 package.json 添加新的 scripts

"lint": "eslint 'src/**/*.{js,jsx}' --ext jsx --ext js --fix --max-warnings=0",

--max-warnings=0 在這邊是不允許任何的警告，這是算是特別的需求，因為同事都會不檢查自己寫的東西就 commit，所以公司特別要求我把這條列進去。
算是一種強制 coding style 的部分。

Prettier

安裝 Prettier yarn add --dev prettier eslint-config-prettier。
建立新檔案 .prettierrc.json ，內容如下：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 100
}

建立新檔案 .prettierignore，內容如下：

# Ignore artifacts:
build
coverage

調整 .eslintrc.yml 設定，在 extends，最後新增如下：

...

extends:
  - eslint:recommended
  - plugin:react/recommended
  - airbnb
  - prettier <-- 新增

...

package.json 的 scripts 新增指令：

"format": "prettier 'src/**/*.{js,jsx}' --write",

Husky and lint-staged

安裝並初始化：

yarn add --dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

package.json 新增指令：

"lint-staged": {
  "src/**/*.{js,jsx}": [
    "yarn lint",
    "yarn format"
  ]
}

調整 package.json 的順序如下所示：

恭喜你，現在有個可以在 commit 的時候自動檢查的 repository

建立自動化檢查的 React App(Husky, prettier, eslint, lint-statge)

緣由：

安裝 React app

移除此專案用不到的部分(可選)

ESlint

Prettier

Husky and lint-staged

u88803494

Related Posts

Comments

緣由：

安裝 React app

移除此專案用不到的部分(可選)

ESlint

Prettier

Husky and lint-staged

u88803494

Related Posts

Vue3 XML Pretty Print與Theme呈現

Filter 應用CORS

變成rule的形狀(3) - Prettier + ESLint

Comments