阅读 4021

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

前言


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

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

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

概述


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

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

开发


一、初始化项目

  1. 创建项目文件,就叫 react-architecture 吧。
  2. 初始化git git init
  3. 初始化npm npm init
  4. 当然不能一口气的只讲配置,so 我们简单的创建一些文件和目录,跑起来看一看效果。目录结构如下:
├── src                     
│   ├── index.html                
│   └── index.js                              
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js
复制代码

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

二、webpack.config.js 的配置

  1. 安装一些依赖: 为了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 
复制代码
  1. 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" : ""}
            }
          }
    }
}
复制代码
  1. babel的配置
    创建.babelrc文件
{
    "presets": [
        ["env",{
            "targets": {
                "browsers": ["IE >= 9"]
            },
            "useBuiltIns": true
        }],
        "react",
        "stage-2"
    ]
}
复制代码
  1. 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>
复制代码
  1. index.js
    万变不离 Hello World~
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <h1>Hello World!</h1>,
    document.getElementById('root')
)
复制代码
  1. 在package.json的 scripts 添加启动命令
    "start": "webpack-dev-server --open"
复制代码
  1. 命令行 运行 npm start 就可以看效果了

总结


本章主要做了3件事:

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

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

系列文章


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

源码


React项目架构

文章分类
前端