从零开始搭建一个 React + Mobx + React Router 脚手架

最新推荐文章于 2024-08-19 10:07:44 发布

置顶

浮沉半生

最新推荐文章于 2024-08-19 10:07:44 发布

阅读量951

点赞数 2

分类专栏：前端开发 React Webpack 文章标签：前端开发 React Mobx

本文链接：https://blog.csdn.net/zgd826237710/article/details/89707244

版权

本文详细介绍了如何从零开始搭建一个基于 React、MobX 和 React Router 的前端开发环境。内容包括项目结构创建、React 开发环境配置、Webpack 配置、Babel 配置、CSS 处理、React 路由实现以及项目打包发布等。通过这篇教程，读者可以了解到如何构建一个完整的 React 开发框架。

摘要由CSDN通过智能技术生成

文章目录

本文详细介绍了如何从零开始搭建一个 React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。

本文代码地址：react-mobx-starter。

建议将代码拉下来之后，配合本文一起查看，效果更佳。

代码下载命令：

git clone -b example https://github.com/beichensky/react-mobx-starter.git

最近将脚手架中的 babel 配置更新到了 7.0.0 版本，所以部分地方作出了修改。目前脚手架中的各类库的版本如下：

node：10.15.3
npm：6.4.1
webpack: 4.29.6
webpack-cli: 3.3.0
webpack-dev-server: 3.1.4
@babel/core: 7.0.0
react: 16.8.6
mobx: 5.9.4
react-router-dom: 5.0.0

如果是从低版本升级到 7.0.0 版本，官方提供了一个新的命令可以直接帮助我们对项目进行更新：

npx babel-upgrade --write --install

更多关于 babel-upgrade 的介绍可以参考官方说明。

一、前情提要

本文的 Demo 分为两个环境，一个是开发环境，另一个是生产环境。

开发环境中讲述的是如何配置出一个更好的、更方便的开发环境；
而生产环境中讲述的是如何配置出一个更优化、更小版本的生产环境。

之前我也就 Webpack 的使用写了几篇文章，本文也是在 Webpack 的基础上进行开发，也是在之前的代码上进行的扩展。

开发环境的配置是在从零开始搭建一个 Webpack 开发环境配置（附 Demo）一文的基础上进行的扩展。
生产环境的配置是在使用 Webpack 进行生产环境配置（附 Demo）一文的基础上进行的扩展。

建议：对于 Webpack 还不了解的朋友，可以先看一下从零开始搭建一个 Webpack 开发环境配置（附 Demo）和使用 Webpack 进行生产环境配置（附 Demo）这两篇文章，可以更好的入手本文。

虽然本文是在之前文章上进行的扩展，但本文还是会详细的介绍每一步的配置。

二、创建项目结构

新建文件夹，命名为：react-mobx-starter

mkdir react-mobx-starter

初始化 package.json 文件

cd react-mobx-starter

# 直接生成默认的 package.json 文件
npm init -y

创建 src 目录，用来存放我们编写的代码
创建 public 目录，用来存放公共的文件
创建 webpack 目录，用来存放 webpack 配置文件

mkdir src

mkdir public

mkdir webpack

在 src 目录下
新建 pages 文件夹，用来存放书写的页面组件
新建 components 文件夹，用来存放公共组件
新建 utils 文件夹，用来存放常用的工具类

cd src

mkdir pages

mkdir components

mkdir utils

在 public 目录下新建 index.html 文件
在 src 目录下新建 index.js 文件
在 webpack 目录下创建 webpack.config.dev.js 和 webpack.config.prod.js

webpack.config.dev.js 用来编写 webpack 开发环境配置
webpack.config.prod.js 用来编写 webpack 生产环境配置

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 + Mobx 全家桶脚手架</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.js

function createElement() {
   
    const ele = document.createElement('div');
    ele.innerHTML = 'Hello, React';
    const root = document.querySelector('#root');
    root.appendChild(ele);
}

createElement();

webpack.config.dev.js 和 webpack.config.prod.js 此时还没有书写内容，我们之后会详细的进行讲述。

我们看一下此时的项目结构，之后就可以进行 webpack 的配置了。

react-mobx-starter
  ├─ public/
    └─ index.html
  ├─ src/
    ├─ components/
    ├─ pages/
    ├─ utils/
    └─ index.js
  ├─ webpack/
    ├─ webpack.config.dev.js
    └─webpack.config.prod.js
  ├─ package.json

三、React 开发环境配置

在 package.json 文件中添加一个执行脚本，用来执行 webpack 命令：

{
   
    ...,
    "scripts": {
   
        "start": "webpack --config webpack/webpack.config.dev.js"
    },
    ...
}

安装 webpack 相关插件

安装 webpack 和 webpack-cli

npm install webpack webpack-cli --save-dev

入口和出口

使用 webpack 进行项目配置的时候，必须要有入口和出口，作为模块引入和项目输出。

webpack.config.dev.js

const path = require('path');

const appSrc = path.resolve(__dirname, '../src');
const appDist = path.resolve(__dirname, '../dist');
const appPublic = path.resolve(__dirname, '../public');
const appIndex = path.resolve(appSrc, 'index.js');

module.exports = {
   
    entry: appIndex,
    output: {
   
        filename: 'public/js/[name].[hash:8].js',
        path: dist,
        publicPath: '/'
    }
}

添加 html-webpack-plugin 插件

执行 npm run start 脚本，可以看到 dist/public/js 目录下多了一个 js 文件，但是这个是由 hash 值命名的的，我们每次都手动引入到 index.html 文件里面过于麻烦，所以可以引入 html-webpack-plugin 插件。

html-webpack-plugin 插件有两个作用

可以将 public 目录下的文件夹拷贝到 dist 输出文件夹下
可以自动将 dist 下的 js 文件引入到 html 文件中

安装 `html-webpack-plugin` 插件

npm install html-webpack-plugin --save-dev

使用 `html-webpack-plugin` 插件

webpack.config.dev.js


const path = require('path');
+ const HTMLWebpackPlugin = require('html-webpack-plugin');

const appSrc = path.resolve(__dirname, '../src');
const appDist = path.resolve(__dirname, '../dist');
const appPublic = path.resolve(__dirname, '../public');
const appIndex = path.resolve(appSrc, 'index.js');
+ const appHtml = path.resolve(appPublic, 'index.html');

module.exports = {
   
    entry: appIndex,
    output: {
   
        filename: 'public/js/[name].[hash:8].js',
        path: appDist,
        publicPath: '/'
    },
+    plugins: [
+        new HTMLWebpackPlugin({
   
+            template: appHtml,
+            filename: 'index.html'
+        })
+    ]
}

设置开发模式

webpack 配置中的 mode 属性，可以设置为 ‘development’ 和 ‘production’，我们目前是进行开发环境配置，所以可以设置为 ‘development’

webpack.config.dev.js

...
module.exports = {
   
+    mode: 'development',
    ...
}

设置 devtool

为了方便在项目出错时，迅速定位到错误位置，可以设置 devtool，生成资源映射，我们这里使用 inline-source-map，更多选择可以在这里查看区别。

webpack.config.dev.js

...
module.exports = {
   
    mode: 'development',
+    devtool: 'inline-source-map',
    ...
}

使用 webpack-dev-server 启动项目服务

安装 webpack-dev-server

npm install webpack-dev-server --save-dev

配置 webpack-dev-server

webpack.config.dev.js

...
module.exports = {
   
    mode: 'development',
    devtool: 'inline-source-map',
+    devServer: {
   
+        contentBase: appPublic,
+        hot: true,
+        host: 'localhost',
+        port: 8000,
+        historyApiFallback: true,
+        // 是否将错误展示在浏览器蒙层
+        overlay: true,
+        inline: true,
+        // 打印信息
+        stats: 'errors-only',
+