# packages(node_modules)

### React
- react
- react-dom

### Hot-Reload
#### React
- react-hot-loader (建議)
- @hot-loader/react-dom (需額外裝，webpack warning fix)
- react-refresh (新出的)
- 目前實測效能上輸 react-hot-loader

### Styling
- emotion (直接使用 className)
- 如果要 SSR 不推薦使用
- @emotion/core (官方推薦 React 使用)
- @emotion/styled (要用 styled-component 才裝)
- linaria (和 emotion 很像，讀取速度更快，額外生成 css)
- sass

### Redux
- react-redux
- redux
- redux-thunk

### Testing
- mocha
- enzyme
- jest
- cypress

### Form (choose one)
- redux-form
- **Deps:** redux
- react-final-form
- **Deps:** final-form

### Router

- react-router
- react-router-dom
- connected-react-router (react-router-redux 已被淘汰) **[更新：這大多時候不需要]**
- history (browser history)

### Apollo (Graphql)

- react-apollo
- apollo-cache-inmemory
- apollo-client
- apollo-link
- apollo-link-http
- graphql
- graphql-tag

### Babel

- @babel/runtime
- babel-loader
- @babel/cli
- @babel/core
- @babel/node
- @babel/plugin-proposal-class-properties **[Support for IE]**
- @babel/plugin-transform-runtime
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/plugin-syntax-dynamic-import **[Support for react lazy dynamic import]**
- @babel/plugin-proposal-nullish-coalescing-operator **[新版功能支援]**
- @babel/plugin-proposal-optional-chaining **[新版功能支援]**
- babel-plugin-emotion **[使用 @emotion/core 可裝此作為 optimize]** [https://emotion.sh/docs/install#with-babel-plugin-emotion](https://emotion.sh/docs/install#with-babel-plugin-emotion)

### Linter

- eslint
- eslint-config-airbnb
- eslint-plugin-flowtype
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react
- eslint-plugin-react-hooks **[if use react hooks]**
- babel-eslint
- husky
- cz-conventional-changelog **（commit 訊息優化 - 需額外設定）**
[commitizen/cz-cli](https://github.com/commitizen/cz-cli)

### Bundler

#### webpack
- webpack
- webpack-cli
- webpack-dev-server
- ~~clean-webpack-plugin **[optional] [webpack plugin]**~~
- 2021/02/19 註記: webpack 5.20.0+ 可透過 output.clean 設定，已不需要此 plugin [webpack 文件](https://webpack.js.org/configuration/output/#outputclean)
- html-webpack-plugin **[optional] [webpack plugin]**
- terser-webpack-plugin **[optional] [webpack plugin]**
- webpack-bundle-analyzer
- 當你需要 bundle size 分析時再裝

#### snowpack
- snowpack

### Type Check

- flow-bin **(為了與 linter-flow 一起使用)[使用 ts 就甭裝]**

### General Tools

- debug (debug log)
- file-loader (webpack file load)
- css-loader & style-loader (css file)
- sass-loader (sass file)

### Animation Lib

- react-spring
- 提供了很多常見的物理運動效果
- lottie-web
- 如果要做複雜的動畫，可請設計師用 AE 製作再透過工具轉成 lottie-web 能吃的 json 格式，用 svg 去 render 效能會蠻好
- gsap
- Rytass official 是使用此，但跟 React 一起用感覺不是那麼好用
- framer-motion
- 可以對動畫做各種控制，有 hooks，有針對 react 做優化

### 2D Lib
- pixi.js
- 可實作更多 2D/偽 3D 效果，支援各種濾鏡/player

### 3D Lib
- three.js
- 真正的 3D，入坑前請三思

### 多國語系

- i18next
- i18next-browser-languagedetector
- i18next-xhr-backend
- react-i18next

### 好用的 packages

- lodash
- 各種好用的 utils
- validatorjs
- 有很多已寫好的 validator
- jszip
- 把圖片都壓縮成 zip，全部下載
- qs (建議直接用原生)
- node 原生就有 querystring
- 可用 new URL() 原生取代
- ellipsize
- 用來做省略文字
- clipboard
- 用來做複製貼上（分享之類的按鈕會用到）
- react-slick（兩廳院原本用這個）
- 輪播圖片
- 但底下的 component 都必須要包在一個可讓 react-slick 塞 css 用的 div 底下，且 arrow 要客製化的話建議用 absolute 方式處理，還有記得要引入它套件的 css style sheet
- swiper（兩廳院後來使用這個）
- 輪播圖片
- 可取代 react-slick，有更高的客製化能力，但 navigation 判斷很雷，目前有 fork 一版自己改

### 純切版

- pug + express

### 工具/資料
[Typescript 所需的第三方 Types 查詢](https://www.typescriptlang.org/dt/search?search=)
[RESTFul API 假資料串接工具(jsonplaceholder)](https://jsonplaceholder.typicode.com/)
[Graphql API 假資料串接工具(graphqlplaceholder)](https://graphqlplaceholder.com/)
[CSS 在各瀏覽器的效能評估(css trigger)](https://csstriggers.com/)

###### tags: `Front-End`