[譯]基於create-react-app打造程式碼規範化的React專案
原文連結: ofollow,noindex">https://medium.com/stephenkoo/how-to-set-up-create-react-app-redux-react-router-redux-thunk-prettier-scss-airbnb-eslint-dda0bba5616a
原文標題:Set up create-react-app with: Redux, React Router, Redux Thunk, Prettier, SCSS, Airbnb eslint, Standard stylelint, and CSS modules —— A (very) opinionated guide on setting up Create React App
原文作者: Stephen Koo
翻譯:杜夢傑
前言:之前團隊內經過討論和溝通,確定了前端開發規範。規範的執行要由上到下,軟硬兼施,除了要求成員們要有自覺性,最好在專案中配置程式碼規範化/格式化工具。我在配置這些工具時,踩了不少坑,後來有幸看到這篇文章。從頭到尾,輕鬆地將所有工具配置好。本人對於這種規範化的專案比較推崇,拒絕雜亂無章的程式碼風格,之後的工作中會一直沿用,也推薦大家使用。Keep your code clean!
這是一篇在 create-react-app
中配置流行包的參考指南。
為了正確的安裝這些包,我花了數小時來閱讀文件和相關文章,寫這篇文章的目的是節省大家的時間。
本指南假定您已經安裝了 brew
、 nvm
和 yarn
。(譯者注:原作者使用的是yarn,我在註釋中寫明瞭對應的npm命令)
0、安裝Create React App
yarn global add create-react-app // npm install create-react-app -g create-react-app your-project-name cd react-base git init
1、配置SCSS
- create-react-app使用者指南 中的相關內容
yarn add node-sass-chokidar npm-run-all // npm install node-sass-chokidar npm-run-all --save-dev
package.json
中新增:
"scripts": { + "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/", + "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive", + "start-js": "react-scripts start", + "start": "npm-run-all -p watch-css start-js", + "build": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom",
將 src/App.css
重新命名為 src/App.scss
。
.gitignore
中新增:
+# build products +src/**/*.css
2、配置Prettier
yarn add husky lint-staged prettier // npm install husky lint-staged prettier --save-dev
新建 .prettierrc
檔案:
{ 'singleQuote': true, 'trailingComma': 'es5', }
package.json
中新增:
+"lint-staged": { + "src/**/*.{js,jsx,json,scss,css}": [ + "prettier --config .prettierrc --write", + "git add" + ] +}, "scripts": { + "precommit": "lint-staged", "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
使用如下命令格式化整個專案:
./node_modules/.bin/prettier --config .prettierrc --write "src/**/*.{js,jsx,scss,css}"
在 編輯器 中整合 Prettier
。(譯者注:非常推薦安裝編輯器外掛,1+1>2)
3、配置eslint和eslint-config-airbnb
檢視並安裝 eslint-config
中的所有依賴:
npm info "eslint-config-airbnb@latest" peerDependencies
可以這樣安裝(Linux/OSX使用者):
( export PKG=eslint-config-airbnb; npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev "$PKG@latest" )
或(Windows使用者):
npm install -g install-peerdeps install-peerdeps --dev eslint-config-airbnb
新建 .eslintrc.js
:
module.exports = { 'env': { 'browser': true, 'jest': true, 'es6': true, 'node': true, }, 'extends': [ 'airbnb', 'prettier', ], 'plugins': [ 'prettier', ], 'rules': { 'prettier/prettier': ['error', { 'singleQuote': true, 'trailingComma': 'es5' }], }, 'parserOptions': { 'ecmaFeatures': { 'jsx': true, } } }
src/registerServiceWorker.js
檔案開頭處新增:
+ /* eslint-disable no-console, no-param-reassign, no-use-before-define */ // In production, we register a service worker to serve assets from local cache.
檢查現有程式碼
自動修復一些 eslint
問題:
node_modules/.bin/eslint --ext=js --ext=jsx --fix .
修改 src/index.js
:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(React.createElement(App), document.getElementById('root')); registerServiceWorker();
src/App.js
重新命名為 src/App.jsx
並修改:
import React from 'react'; import logo from './logo.svg'; import './App.css'; const App = () => ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); export default App;
src/App.test.js
重新命名為 src/App.test.jsx
並修改:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<App />, div); });
4、配置stylelint和stylelint-config-standard
yarn add stylelint stylelint-config-standard --dev // npm install stylelint-config-standard --save-dev
新建 .stylelintrc
:
{ 'extends': 'stylelint-config-standard', }
5、配置eslint和stylelint命令
修改 package.json
:
"lint-staged": { + "src/**/*.{js,jsx,json}": [ + "eslint --fix", + "prettier --config .prettierrc --write", + "git add" + ], + "src/**/*.{scss,css}": [ + "stylelint --config=.stylelintrc --fix", + "prettier --config .prettierrc --write", + "git add" + ] }, "scripts": { "precommit": "lint-staged", "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive", "start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build": "npm run build-css && react-scripts build", + "test:lint:js": "eslint --ext=js --ext=jsx .", + "test:lint:scss": "stylelint --config=.stylelintrc '**/*.scss'", + "test:lint": "run-s test:lint:**", + "test:unit": "react-scripts test --env=jsdom", + "test": "run-s test:**", "eject": "react-scripts eject", "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check" },
6、配置Redux、React Router和Redux Thunk
- Jamie Barton’s article 中的相關內容
yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk // npm install react-redux react-router-dom react-router-redux@next redux-thunk --save
7、配置CSS Modules
- 警告:本操作需要暴露(eject)
create-react-app
的配置 - nulogy 和 css-loader 中的相關內容
yarn eject // npm eject yarn install // npm install
修改 config/webpack.config.dev.js
:
{ loader: require.resolve('css-loader'), options: { importLoaders: 1, + modules: true, + localIdentName: "[name]__[local]--[hash:base64:5]" }, },
修改 config/webpack.config.prod.js
:
{ loader: require.resolve('css-loader'), options: { importLoaders: 1, + modules: true, minimize: true, sourceMap: true, }, },
修正現有CSS路徑
刪除css/scss檔案類名中的 ‘-’ 。
修改 src/App.jsx
:
import React from 'react'; import logo from './logo.svg'; import styles from './App.css'; const App = () => ( <div className={styles.App}> <div className={styles.header}> <img src={logo} className={styles.logo} alt='logo' /> <h2>Welcome to React</h2> </div> <p className={styles.intro}> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); export default App;
最終成果
最終成果在下面兩個Github倉庫中:
其他一些有用的包
你可能會用到下面的一些包:
下面列出了create-react-app已使用的包(eject後可以看到)做參考,不要重複安裝:
“autoprefixer”: “7.1.2”, “babel-core”: “6.25.0”, “babel-eslint”: “7.2.3”, “babel-jest”: “20.0.3”, “babel-loader”: “7.1.1”, “babel-preset-react-app”: “^3.0.2”, “babel-runtime”: “6.26.0”, “case-sensitive-paths-webpack-plugin”: “2.1.1”, “chalk”: “1.1.3”, “css-loader”: “0.28.4”, “dotenv”: “4.0.0”, “eslint”: “4.4.1”, “eslint-config-react-app”: “².0.0”, “eslint-loader”: “1.9.0”, “eslint-plugin-flowtype”: “2.35.0”, “eslint-plugin-import”: “2.7.0”, “eslint-plugin-jsx-a11y”: “5.1.1”, “eslint-plugin-react”: “7.1.0”, “extract-text-webpack-plugin”: “3.0.0”, “file-loader”: “0.11.2”, “fs-extra”: “3.0.1”, “html-webpack-plugin”: “2.29.0”, “jest”: “20.0.4”, “object-assign”: “4.1.1”, “postcss-flexbugs-fixes”: “3.2.0”, “postcss-loader”: “2.0.6”, “promise”: “8.0.1”, “react”: “^15.6.1”, “react-dev-utils”: “⁴.0.1”, “react-dom”: “^15.6.1”, “style-loader”: “0.18.2”, “sw-precache-webpack-plugin”: “0.11.4”, “url-loader”: “0.5.9”, “webpack”: “3.5.1”, “webpack-dev-server”: “2.7.1”, “webpack-manifest-plugin”: “1.2.1”, “whatwg-fetch”: “2.0.3”