React 手把手教你实现 mine-clearance (扫雷)（一）

前言

mine-clearance(扫雷)作为一个经典的 windows 小游戏，也是 leetcode 第 529 题，难度中等，今天我将手把手教你完成这个实践方案。

我用的技术栈：react、webpack5、pnpm、less，对 pnpm 不了解的可以参考我这两篇文章昨晚，我体会了没有 pnpm 的痛，2022 前端包管理方案-pnpm 和 corepack

效果图：

在线访问、源码地址

搭建项目

如果你希望尽快开始的话，像这种 js 小游戏之类的项目是很适合用在线编辑器来写的，最初我是用的 codesandbox 这个在线编辑器来写的，它比 codepen 之类侧重代码片段的工具来说更好用，甚至可以完成完整项目的在线开发，不过这次我将使用本地环境来搭建。

首先使用 creat-react-app 创建新项目, 你注意到了么，我用了 pnpx 而不是大家熟知的 npx，其实这个是 pnpm 平台从源获取包的命令行工具, 和 npx 提供了相同的接口。(最新文档显示 pnpx 已弃用！官方建议改用 pnpm exec 和 pnpm dlx 命令。)

pnpx creat-react-app mine-clearance
pnpm dlx creat-react-app mine-clearance

执行完毕后，可以通过 npm run start 启动服务, 哎等等，不是说用 pnpm 的么，恩~这时候 pnpm 确实还不能工作，往下看就知道了。

现在我想使用 less，因为 creat-react-app 默认支持的是 sass/scss, 我需要先使用 eject  命令暴露 webpack 配置（不可逆）, 当然也可以用 react-app-rewired 搭配 customize-cra 来覆盖默认的 webpack 配置；这里我选择直接 eject。

npm run eject

eject 后的项目目录发生了巨大变化，最核心的就是暴露了 config 文件夹，webpck 相关的配置都在里面。

这个时候，pnpm 就可以使用了，先在package.json 中添加 less 包文件信息，

"devDependencies": {
    "less": "3.9.0",
    "less-loader": "4.1.0"
 }

然后使用 pnpm install 指令重新安装包,它将先删除原 npm 类型的 node_modules 文件，然后按照 pnpm 的方式重新安装依赖。

下面讲讲 less 的配置，打开 config 下的 webpack.config.js 按照 sass 的格式进行配置, 修改style files regexes（样式文件正则），找到注释 style files regexes，在这最后添加如下两行代码：

找到 getStyleLoaders 函数，添加 lessOptions 参数，在css-loader 下面添加 less-loader 配置

{
    loader: require.resolve('less-loader'),
    options: lessOptions,
}

然后仿照 sass 添加如下配置

执行完成后，我们的环境配置就全部结束了，接下来就开始介绍 扫雷游戏的核心代码实现。

核心代码实现

Cell 方块（细胞）类型 Map

这个Map 用来保存所有的方块状态数据，以及映射关系，0 代表此方块为空，就是没有地雷，1-8 代表此方块周围相邻元素中有多少个地雷，10 代表此方块为地雷，这里找了张图片来显示。

const STATUSMAP = new Map([    [0, '空'],
    [1, '1'],
    [2, '2'],
    [3, '3'],
    [4, '4'],
    [5, '5'],
    [6, '6'],
    [7, '7'],
    [8, '8'],
    [10, require('./assets/mine.jpeg')],
  ])