[譯]基於create-react-app打造程式碼規範化的React專案

React · 發表 2018-09-11 09:45:18

摘要：原文連結： https://medium.com/stephenkoo/how-to-set-up-create-react-app-redux-react-router-redux-thunk-prettier-scss-airbnb-eslint-dda0bba5616a 原文標題...

原文連結： 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

create-react-app推薦使用Prettier而不是ESLint
create-react-app使用者指南中的相關內容

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-airbnb 和 Blanca Perello’s article 中的相關內容

檢視並安裝 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

stylelint-config-standard 和 Blanca Perello’s article 中的相關內容

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”