从零搭建一个 React 项目（非脚手架）

谁践踏了优雅 2022-11-21 01:05 353阅读 0赞

### 从零搭建一个 React 项目（非脚手架） ###

*  前言
 *   *   *  1. 创建根目录
         *  2. 安装 react
         *  3. 安装 webpack
         *  4. 安装 loaders 和 plugins
         *  5. 配置 webpack
         *  6. 创建项目

# 前言 #

为了实现快速开发，大多数前端开发者在创建 React 项目时都会使用 `create-react-app` 命令直接安装 React 脚手架。其好处是不用安装或配置 webpack，也不需要关注与 webpack 相关的 loader 或 plugin 。

但是对于前端开发来说，掌握 webpack 必不可少，面试中也是逢面必问。本文主要介绍不使用脚手架从零搭建一个 React 项目，其核心就是如何安装配置 webpack。

### 1. 创建根目录 ###

创建 ManuallyReact 文件夹，通过编辑器（webstorm 或者 vcode ）打开。  
在控制台执行以下命令初始化项目，安装完成之后会自动创建 package.json 文件。

> `npm init`

**注意**：在执行 `npm init` 初始化项目时会有一系列配置提示，直接 enter 进入下一步即可。

### 2. 安装 react ###

使用 React 框架必须安装 react 和 react-dom 这两个包。

> `npm i react react-dom`

其中 react 是实现虚拟 DOM，react-dom 是实现与原生 DOM 的交互。

### 3. 安装 webpack ###

工程化项目必须安装 webpack 打包工具。  
在控制台执行以下命令安装 webpack，安装成功后会出现 node\_modules 文件夹和 package-lock.json。

> `npm i webpack@4.32.2 webpack-cli@2.0.9 webpack-dev-server@3.0.0`

其中 node\_modules 文件夹是 webpack 相关的包依赖，package-lock.json 文件是对包依赖的一些描述（名称、版本、依赖包等）。

**注意**：在安装 webpack、webpack-cli、webpack-dev-server 这三个包时一定要按照指定的版本安装，如果随意安装，这三个包之间可能会出现版本不兼容的情况。

### 4. 安装 loaders 和 plugins ###

webpack 本身只能打包 JS（ES5） 文件，所以如果涉及到 JS ES6 语法和 CSS 样式。就必须安装相关的 loader，以及一些必要的 plugin。

**安装 babel 编译 ES6 语法**

> `npm i @babel/core@7.12.3 babel-loader@8.1.0 @babel/preset-react@7.12.1`

其中 @babel/core 是核心功能包，babel 从版本 7 开始用 @开头的 scope 包，老版本是babel-core，其他的包都是一样的规律。  
babel 中带 preset 的包指的是预设的一些 plugin 集合。比如使用 React 框架就需要安装 @babel/preset-react，其作用是实现 jsx 语法。

**安装 loader 编译 CSS 文件**

> `npm i css-loader@5.0.0 style-loader@2.0.0`

其中 css-loader 是编译 CSS 文件，style-loader 是将编译好的 CSS 文件插入到 style 中。

**安装 plugin 打包 HTML 模板**

> `npm i html-webpack-plugin@4.5.0`

**注意**：在安装 @babel/core 和 @babel/preset-react 这两个包时一定要安装相同大版本的包，比如要么都安装 版本 7，要么都降级到版本 6，否则会报各种错，大概率就是版本不兼容导致。

安装完成之后 package.json 文件，内容如下：

{ 
      "name": "manuallyreact",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "start": "webpack-dev-server --open",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": { 
        "@babel/core": "^7.12.3",
        "@babel/preset-react": "^7.12.1",
        "babel-loader": "^8.1.0",
        "css-loader": "^5.0.0",
        "html-webpack-plugin": "^4.5.0",
        "react": "^16.14.0",
        "react-dom": "^16.14.0",
        "style-loader": "^2.0.0",
        "webpack": "^4.44.2",
        "webpack-cli": "^2.0.9",
        "webpack-dev-server": "^3.0.0"
      }
    }

### 5. 配置 webpack ###

安装了相关的依赖之后需要配置 webpack。在根目录下新建 webpack.config.js 文件，内容如下。

const path = require('path');
    const htmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = { 
        entry:'./src/index.js',
        output:{ 
            path:path.resolve(__dirname,'dist'),
            filename:"main.js"
        },
        devServer: { 
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true,//实时刷新
        },
        module:{ 
            rules:[
                { 
                    test: /\.js$/,
                    exclude: path.resolve(__dirname, 'node_modules'),
                    include: path.resolve(__dirname, 'src'),
                    loader:'babel-loader',
                    options:{ 
                        presets: [
                            "@babel/react"
                        ]
                    }
                },
                { 
                    test: /\.css$/,
                    use:['style-loader','css-loader']  // 从右到左执行，所以注意顺序
                }
            ]
        },
        plugins:[new htmlWebpackPlugin({ 
            template:path.join(__dirname,'./public/index.html'),
            filename: 'index.html'
        })
        ],
    }

### 6. 创建项目 ###

在根目录下新建 public 文件夹，在该文件夹下新建 index.html，内容如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Manually React</title>
    </head>
    <body>
    <div id="root"></div>
    </body>
    </html>

在根目录下新建 src 文件夹，在 src 文件夹下：  
新建 index.js 作为入口文件。  
新建 index.css 用于编写样式。

index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    const App = (
        <div className="border">
            <h1>Manually React</h1>
        </div>
    )
    ReactDOM.render(App,document.getElementById("root"));

index.css

.border{ 
        border: 1px solid red;
        border-radius: 10px;
        margin: 10px;
        text-align: center;
    }

执行 `npm start` 后，最终效果：

![在这里插入图片描述][2020103023084923.png_pic_center]

看完后最好亲自动手实践一下。

[2020103023084923.png_pic_center]: /images/20221120/0fd90127bc8c4773bf9f45c0eacf2680.png