项目初始化，搭建react开发环境

站长

2023年09月20日 21:57 · 阅读数 32

用webpack、React创建单页面应用开发环境。

使用pnpm

本项目使用pnpm代替npm作为包管理器。如果你没有用过pnpm，可以用以下方式开始：

安装pnpm：

npm install -g pnpm

常用的两个pnpm命令示例：

# 以下相当于 npm install --save react
pnpm add react

# 以下相当于 npm install --save-dev webpack
pnpm add -D webpack

创建package.json

package.json是node项目的依赖管理文件。

创建初始package.json

mkdir runmix
cd runmix
pnpm init

package.json内容如下：

{
  "name": "runmix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装react

一个React浏览器项目，需要包含至少react和react-dom两个依赖包。

pnpm add react react-dom

pnpm可以一次添加多个依赖

写React代码

我们打开react官网，找一个最简单的示例，作为我们的React应用的入口文件代码。

创建src源码目录和入口文件App.jsx。

mkdir -p src
touch src/App.jsx

App.jsx的内容如下：

function RunmixApp() {
  return (
    <div>
      <h1>Welcome to RunmixApp</h1>
    </div>
  );
}

用react-dom，将RunmixApp渲染到浏览器。

import { createRoot } from 'react-dom/client'
function RunmixApp() {
  // ...
}
createRoot(document.getElementById('root'), <RunmixApp />)

好了，这些代码，能直接在浏览器端运行吗？

不行。因为浏览器，只认识html/js/css。而这只是一段jsx代码，需要借助html，并转换为javascript，才可以运行到浏览器中。

而将jsx转换成javascript，并创建合适的html代码，我们可以借助编译工具webpack。

项目编译

这部分用到了webpack, babel, npx, 如果你完全不了解其背景知识，可能看着有点懵。不过，你仍然可以根据代码块中的命令及代码，走完流程。

安装编译工具webpack。

pnpm add -D webpack webpack-cli

只要在命令行中运行webpack，就需要引入webpack-cli

webpack是根据配置文件来决定工作流程，其默认配置文件是根目录下的webpack.config.js。

创建webpack.config.js（根目录下执行）

touch webpack.config.js

内容如下：

module.exports = {
  entry: './src/App.jsx',
}

我们用npx快捷地运行一下webpack试试。

npx webpack

报错了。项目初始化，搭建react开发环境

提示webpack不认识App.jsx。这，是为啥呢？

webpack本身只是一个编译工具框架，它依赖各种各样的loaders和plugins来处理不同的文件。没有指定处理.jsx的loader，webpack就不认识以此为后缀的文件。

比如，编译不同后缀的文件，webpack生态中使用不同的loader。处理.scss，需要scss-loader，处理.jsx，需要babel-loader。当然，babel-loader不仅仅可以处理.jsx，babel有自己的插件体系。

又比如，生成入口index.html文件，常常使用html-webpack-plugin。

接下来，我们为webpack.config.js补充loader和plugin。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        use: 'babel-loader'
      }
    ]
  }
}

为了让babel-loader认识.jsx文件，还需要给babel-loader增加babel配置。babel-loader默认从根目录下的.babelrc文件中读取项目的babel配置。

创建.babelrc

touch .babelrc

内容如下:

{
  "presets": [
    ["@babel/preset-react", {"runtime": "automatic"}]
  ]
}

这里，我们需要给项目添加@babel/preset-react依赖。

pnpm add -D babel-loader @babel/preset-react

再次运行npx webpack。可以看到生成了dist目录，并且生成了main.js文件，如下图所示：项目初始化，搭建react开发环境

我们还需要一个index.html，可以自己在dist目录创建一个。代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Runmix</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"></meta>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

在浏览器中打开index.html。效果如下：项目初始化，搭建react开发环境

自动生成index.html

上面手动创建的html中，我们引入了固定名称的./main.js。如果该文件名是变化的呢？（生产环境中经常需要静态资源如js/css/图片生态动态的名称，以避免错误的缓存）手动引入就不太合适了。

接下来，我们用webpack的html插件，自动生成index.html并引入js文件。

安装html-webpack-plugin依赖。

pnpm add -D html-webpack-plugin

修改webpack.config.js，添加：

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  // 动态生成入口js文件名
  output: {
    filename: 'app.[contenthash:8].js'
  }
}

添加模板文件./public/index.html。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Runmix</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"></meta>
</head>
<body>
<div id="root></div>
</body>
</html>

再次运行npx webpack，打开dis/index.html，可以看到能动态引入js文件了。如下图：项目初始化，搭建react开发环境

生成git项目

将该项目转换为一个git项目，以便提交到github/gitee之类的仓库。

初始化git

git init

添加.gitignore，忽略不希望提交的文件。

touch .gitignore

内容如下：

dist/
package-lock.json
pnpm-lock.yaml
node_modules/

提交代码

git add ./
git commit -m 'init project using react/webpack'

添加远端仓库

git remote add origin git@github.com:runmix-dev/runmix.git

推送最新代码到github

git push --set-upstream origin main

章节源码

本章节完整源码：github.com/runmix-dev/…