前言
這篇文件我們來配置 eslint，建立專案檔案、目錄架構
開發
一、配置eslint
配置eslint我需要安裝一些依賴包：
npm install -D eslint eslint-loader eslint-plugin-react babel-eslint
複製程式碼修改webpack.config.js檔案
{
test:/\.(js|jsx)$/,
use:["babel-loader", "eslint-loader"],
exclude:/node_modules/
}
複製程式碼建立.eslintrc.js 檔案
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends":[
"eslint:recommended",
'plugin:react/recommended',
],
"parser": 'babel-eslint',
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-console': 0
}
};
複製程式碼當然，也可以使用eslint --init來建立
> eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript
複製程式碼eslint 的配置規則有很多，可以按照自己喜歡的方式來，網上也有很多很好的規則，這裡就不一一介紹了。
二、完善專案檔案、目錄結構
先來看下我們上一篇時建立的簡單目錄結構
├── src
│ ├── index.html
│ └── index.js
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js
複製程式碼很簡單，實際專案中的結構不會這麼簡單，讓我總體看下實際的目錄結構吧
├── mock # 本地模擬資料
├── public
├── src
| ├── assets # 本地靜態資源
│ ├── common # 應用公用配置，如導航資訊
│ ├── components # 專案通用通用元件
│ ├── routes # 業務頁面入口和常用模板
│ ├── utils # 工具庫
│ ├── index.html # HTML 入口模板
│ ├── index.js # 應用入口
│ ├── index.less # 全域性樣式
│ └── router.js # 路由入口
├── tests # 測試工具
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js
複製程式碼我的目錄結構大概就是這樣，可能會有差別哦~
好，下面讓我們建立一些程式碼,在routes資料夾下建立一個Home.jsx
import React, {PureComponent} from 'react'
export default class Home extends PureComponent{
render(){
return (
<div>Hello World!</div>
)
}
}
複製程式碼router.js裡
import React from 'react'
import {Route,HashRouter} from 'react-router-dom'
import Home from './routes/Home.jsx'
const RouterConfig = ()=>{
return (
<HashRouter>
<Route path="/" component={Home}/>
</HashRouter>
)
}
export default RouterConfig
複製程式碼index.js裡
import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'
ReactDOM.render(
<Router />,
document.getElementById('root')
)
複製程式碼然後我們 npm start下，又是和Hello World相見的時候了。
總結
本篇主要講了2點
- 配置eslint
- 專案目錄結構
下篇我們來介紹實現mock本地資料模擬介面