前言
这篇文档我们来配置 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本地数据模拟接口
