從零開始React專案架構(二)

ZeroNoob發表於2018-06-07
React架構

前言

這篇文件我們來配置 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點

  1. 配置eslint
  2. 專案目錄結構

下篇我們來介紹實現mock本地資料模擬介面

系列文章

  1. 從零開始React專案架構(一)
  2. 從零開始React專案架構(三)
  3. 從零開始React專案架構(四)

相關文章