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

时间 2019-11-16

标签开始 react 项目架构栏目 React 繁體版

原文原文链接

前言

零零散散也作过很多项目了，有基于jquery、bootstrap的，有基于jquery、easyui的，有基于react的。javascript

项目多了总会有一些本身感悟和经验，因此分享出来，确定有不对和不合适的地方，欢迎批评指正。css

好了，废话很少说了，让咱们从零开始，一步一步的折腾吧。html

概述

我暂时分红5各部分来介绍：java

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

开发

1、初始化项目

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

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

咱们先来配置下webpack，暂时先无论其余。node

2、webpack.config.js 的配置

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

npm install -D webpack@3 webpack-dev-server@2 html-webpack-plugin
复制代码

react，须要安装react

npm install -S react react-dom react-router-dom
复制代码

处理less，须要安装jquery

npm install -D css-loader style-loader less less-loader
复制代码

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

npm install -D url-loader file-loader
复制代码

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

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件事：github

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

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

系列文章

源码

React项目架构