从零开始React项目架构(二)

前言

---

这篇文档咱们来配置 eslint，建立项目文件、目录架构

开发

---

1、配置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 的配置规则有不少，能够按照本身喜欢的方式来，网上也有不少很好的规则，这里就不一一介绍了。

2、完善项目文件、目录结构

先来看下咱们上一篇时建立的简单目录结构

├── 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点

1. 配置eslint
2. 项目目录结构

下篇咱们来介绍实现mock本地数据模拟接口

系列文章

---

1. 从零开始React项目架构(一)
2. 从零开始React项目架构(三)
3. 从零开始React项目架构(四)