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

前言

零零散散也做过不少项目了，有基于jquery、bootstrap的，有基于jquery、easyui的，有基于react的。

项目多了总会有一些自己感悟和经验，所以分享出来，肯定有不对和不合适的地方，欢迎批评指正。

好了，废话不多说了，让我们从零开始，一步一步的折腾吧。

概述

我暂时分成5各部分来介绍：

开发环境创建
配置eslint，创建项目文件和目录结构
mock本地数据模拟接口
发布环境webpack配置
单元测试

开发

一、初始化项目

创建项目文件，就叫 react-architecture 吧。
初始化git git init
初始化npm npm init
当然不能一口气的只讲配置，so 我们简单的创建一些文件和目录，跑起来看一看效果。目录结构如下：

├── src                     
│   ├── index.html                
│   └── index.js                              
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js

我们先来配置下webpack，暂时先不管其他。

二、webpack.config.js 的配置

安装一些依赖: 为了webpack运行，需要安装（我用了webpack3+）

    npm install -D webpack@3 webpack-dev-server@2 html-webpack-plugin

react，需要安装

    npm install -S react react-dom react-router-dom

处理less，需要安装

    npm install -D css-loader style-loader less less-loader

处理图片和字体文件，需要安装

    npm install -D url-loader file-loader

为了支持高级语法-babel，需要安装

    npm install -S babel-polyfill // 实际生产环境也会用到
    npm install -D babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-2

webpack.config.js 配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    entry:{
        main:['babel-polyfill','./src/index.js'],
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {  
                test: /\.(woff|eot|ttf|svg|png|jpg)$/,  
                use: [  
                    {  
                        loader: 'url-loader',  
                        options: {  
                            limit: '1024'  
                        }  
                    },  
                ]  
            },
            {  
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: [  
                    {  
                        loader: 'url-loader',  
                        options: {  
                            limit: '1024'  
                        }  
                    },  
                ]  
            },
            {
                test: /\.(css|less)$/,
                use: [
                    'style-loader',
                    { 
                        loader: 'css-loader',
                        options: { importLoaders: 1 } 
                    },
                    'less-loader'
                ]
            },
            {
                test:/\.(js|jsx)$/,
                use:"babel-loader",
                exclude:/node_modules/
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({template:'./src/index.html'}),
    ],
    devServer:{
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000,
        proxy: {
            "/api": {
              target: "http://127.0.0.1:3000/",
              pathRewrite: {"^/api" : ""}
            }
          }
    }
}

babel的配置
创建.babelrc文件

{
    "presets": [
        ["env",{
            "targets": {
                "browsers": ["IE >= 9"]
            },
            "useBuiltIns": true
        }],
        "react",
        "stage-2"
    ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react-architecture</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.js
万变不离 Hello World~

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <h1>Hello World!</h1>,
    document.getElementById('root')
)

在package.json的 scripts 添加启动命令

    "start": "webpack-dev-server --open"

命令行运行 npm start 就可以看效果了

总结

本章主要做了3件事：

创建简单的项目文件
安装所需要依赖
webpack、babel 开发环境的配置， Hello World 基本代码的编写

下篇文章将介绍配置eslint 目录架构

系列文章

源码

React项目架构