抛开脚手架，徒手搭建 react 项目（二）抛开脚手架，徒手搭建 react 项目（一）接着上文继续完善我们的项目添

[《抛开脚手架，徒手搭建 react 项目（一）》](juejin.cn/post/739816… ")我们用webpack搭建了一个react项目，引入了typescript，用Babel编译，还用webpack-merge拆分了我们的配置文件。

《抛开脚手架，徒手搭建 react 项目（二）》我们在项目里面引入了eslint，还介绍了打开服务的五种方法。尤其重要的是 nginx，要你在本地体验一把线上奔跑的感觉。

《抛开脚手架，徒手搭建 react 项目（三）》我们在项目里面引入了 stylelint、还有husky相关工具，轻松实现git commit的时候，对代码格式和提交信息做具体的检测。

《抛开脚手架，徒手搭建 react 项目，webpack打包优化篇（四）》亲手测试并整理了六点减少打包时间的手段。

抛开脚手架，徒手搭建 react 项目，webpack打包优化篇（五）亲手测试并整理了六点能够缩减打包体积的手段

接着上文继续完善我们的项目

添加 eslint

一.说明

Eslint 中文文档：zh-hans.eslint.org/docs/latest…

Eslint 英文文档：eslint.org/docs/latest…

github Eslint github.com/eslint/esli…

二.使用Eslint的好处

使用ESLint能为开发工作带来以下好处：

提高代码质量：ESLint可以识别常见的编码错误和格式问题，帮助开发人员捕获并修复这些问题，从而提高代码的质量和稳定性。
统一代码风格：ESLint允许开发团队指定代码风格规范，并自动检查代码是否符合规范，从而确保代码一致性和可读性。
减少错误和调试时间：ESLint可以在编码时即时检测常见问题和错误，从而减少错误并节省调试时间。
提高开发效率：ESLint可以自动检测代码问题，从而减少手动检查和修复代码的时间，帮助开发人员更快地编写高质量的代码。

三.项目基础配置

先安装eslint插件，试一试，安装eslint的版本最好是8.0.1的，eslint插件的版本是2.4.2的，不然页面文件，有错也不会显示红色提示。eslint9.X生成的配置文件和插件不匹配，解决冲突也很讨厌。

npm install eslint@8.0.1 --save-dev
npx eslint --init

执行安装命令以后，执行npx eslint --init就会帮我们初始化一个配置文件出来，如下：

在init的时候你一步一步选择就已经帮你把具体的插件都安装好了，所以不需要继续配置，直接添加命令行"lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx}\""，测试

   "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx}\""
  },

执行npm run lint 以后那些错误他会帮我们改掉

四.自动格式化代码

我们想在编码的时候，或者保存的时候能够自动格式化一下，那就再VScode上集成eslint吧。最终要达到的效果是：在对文件保存时自动格式化react、 Vue、JS/TS、CSS/SCSS等文件中的代码。

很多文章都提出使用prettier来做代码格式化，但在使用过程中发现它有一些局限性，而且她还会和prettier有些重复，当你修改了eslint，但是没有修改prettier就会不生效，虽然目前有一些插件可以解决他们相互撕扯的问题，但是我们发现vscode和eslint相互配合也能实现prettier的效果。

VSCode 自带的格式化工具和 EditorConfig 及其他插件一结合就能达到理想效果。

eslint侧重点是质量，prettier的侧重点是格式

在 VS Code 中安装 ESLint、Stylelint、EditorConfig for VS Code 插件。

vscode 常用插件

Auto Close Tag --标签自动闭合
Auto Rename Tag --标签自动改名
Bracket Pair Colorizer – 括号高亮
Live Server – 启动本地的Web服务器
Git History – 查看 git 提交历史
One Dark Pro – 比较好看的黑色主题
ESLint、
Stylelint
EditorConfig for VS Code

设置vscode的用户，工作区只对本项目有效

1.安装`ESLint、Stylelint 、EditorConfig for VS Code` 插件

都安装他们的稳定版本就好了，不要安装最新版本，按照下图去找版本。

2.创建 .editorconfig 文件

安装好EditorConfig for VS Code以后，需要在项目根目录下面创建一个配置文件.editorconfig，然后输入下面配置，你可以把eslint不支持，但是prettier支持的东西，都配置到这里来。

# 告诉编辑器这是最顶层的（不要再向上找了）
root = true

# All Files
[*]
charset = utf-8                  # 设置编码为 utf-8
indent_style = space             # 2 个空格的缩进
indent_size = 2                  
end_of_line = lf                 # Unix 风格的换行
insert_final_newline = true      # 始终在文件末尾插入一个新行
trim_trailing_whitespace = true  # 删除行尾空格
max_line_length = 200            # 单行最大宽度

# Markdown 文件
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

3.vscode 自动格式化

我一保存文件，vscode自动帮我把文件的格式给调整好，怎么使用呢？这就需要eslint插件

第一步：vscode用eslint插件格式化

第二步：配置setting

我们在vscode的setting.json里面加入下面代码。

当ctrl+s保存格式化成功，必须配置这个

  "javascript.format.semicolons": "insert", // js文件，强制必须有分号，设置`remove`则禁止分号
  "typescript.format.semicolons": "insert", // ts文件，同上
  "editor.tabSize": 2, // 设置默认缩进为2个空格
  "editor.detectIndentation": false, // 是否强制所有文件按tabSize设置缩进；"否"则根据文件内容缩进、新建文件按tabSize缩进。
  "files.insertFinalNewline": true, // 所有文件末尾留一空行
  "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行
  "editor.formatOnSave": true, // 在保存时格式化文档
  "editor.wordWrap": "on",
  "editor.insertSpaces": true,
  "editor.autoIndent": "advanced",
  "editor.trimAutoWhitespace": true,
  "files.eol": "\n",
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit" // 保存时自动修复错误
  },
  "eslint.enable": true,
  "eslint.options": {
    "configFile": "./eslint.config.js"
  },
  "eslint.format.enable": true,
  "eslint.run": "onSave",
  "eslint.validate": ["javascript","javascriptreact","html", "markdown","vue","typescript","typescriptreact"],
  // 开启对样式文件的检查修复
  "stylelint.validate": ["css", "less", "scss", "postcss", "vue", "html"],
  // 默认使用vscode的格式化
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "[scss]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features" // 设置js类型文件的默认format为VSCode自带Format
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features" // jsx文件，同上
  },

如果你是jsx或者tsx文件，格式化记得配置，不然不执行！

我回车的时候帮我格式化代码了。

五.prettier自动格式化

ESLint 和 Prettier 可能会产生冲突，但这主要发生在它们尝试对同一代码规则进行不同的处理时。然而，这两个工具旨在解决代码质量的不同方面，因此它们也可以很好地协同工作。

ESLint

目的：ESLint 主要用于发现代码中的问题，如潜在的错误、不一致的编码风格、未使用的变量等。可配置性：ESLint 允许自定义规则，使其可以强制实施特定的编码标准和最佳实践。

Prettier

目的：Prettier 主要用于自动格式化代码，以保持代码风格的一致性。风格规则：Prettier 有一套默认的风格规则，例如缩进、行宽、引号等，并且这些规则不太可配置。

冲突的原因冲突通常发生在两个工具对某些代码风格规则有不同的处理方式。例如，ESLint 可能要求使用单引号，而 Prettier 默认使用双引号。

当这两个工具同时运行时，它们可能会对代码的同一部分提出不同的修改建议，从而造成冲突。

解决冲突

使用 ESLint 和 Prettier 集成插件:

使用像eslint-plugin-prettier 和 eslint-config-prettier这样的插件可以帮助协调这两个工具。

eslint-plugin-prettier 将 Prettier 作为ESLint的规则运行。

eslint-config-prettier 关闭所有与 Prettier 冲突的 ESLint 规则。

统一代码风格规则:

确保 ESLint 和 Prettier 的配置文件中定义的代码风格规则是一致的。

通常，你可以让 Prettier 处理代码格式化相关的规则，而让 ESLint 处理代码质量和潜在错误相关的规则。工作流程集成:

在开发工作流程中正确集成这两个工具，例如，在保存文件时先运行 Prettier 进行格式化，然后运行 ESLint 进行质量检查。通过正确配置和集成，ESLint 和 Prettier 可以一起协同工作，提高代码质量，同时保持代码风格的一致性。

eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；

而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持包含js在内的多种语言。

总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。

请参考文件： blog.csdn.net/lzb34811017…

我没有安装，你们自由选择。

其实，prettier自动格式化原理和eslint的是一样的，就是安装prettier插件以后，我们要在vscode的setting里面设置格式化的工具是prettier，然后你就可以配置.prettier.json了，配置上以后你想指定具体的配置文件，可以在vscode上配置下，这样prettier插件就能找到项目里面的配置文件了。具体操作看参考文件。

六.`webpack` 集成 `eslint`

文档：webpack.docschina.org/plugins/esl…

为啥要集成 webpack ，我不想专门搞个命令干fix的事情，因为有些人发布前就不会去执行npm run lint 或者 npm run fix,如果能集成到webpack里面，打包的时候就去eslint多好，我看你改不改？

在 webpack 4 中，ESLint 是通过 loader 的方式集成到 webpack 中的。在 webpack 5 中，是通过 plugins（插件）的形式进行集成。插件名称为 eslint-webpack-plugin。该插件有依赖 eslint 包，故需要安装两个开发依赖包： npm add eslint eslint-webpack-plugin -D

`eslint-webpack-plugin的优势：`

灵活配置：你可以根据自身需求调整插件的行为，例如选择要检查的文件扩展名、是否开启修复模式等。
无缝集成：与Webpack深度集成，无需额外设置即可开始工作，持续集成（CI）和持续部署（CD）流程中，作为验证代码质量的一环。
性能优化：支持缓存和多线程，减少不必要的开销。
智能错误处理：默认情况下，会根据错误和警告数量动态调整错误报告级别，避免误报。

执行命令

npm add eslint eslint-webpack-plugin -D

添加配置

    new ESLintPlugin({
      // 指定检查文件的根目录,根据这个配置 
      context: './src/**/*',
      extensions: ['jsx', 'js', 'ts', 'tsx'],
      quiet: true,
    }),

你在命令行："lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""里面怎么配置，在ESLintPlugin里面就怎么配置，不然不生效的。

测试

先执行下npm run lint，看看文件有有没有报错，有的话就执行下npm run dev,看看项目会不会报错，客户端渲染会不会被拦截。

其实我觉得eslint-webpack-plugin的作用就是在打包的时候检测下代码质量，而且它提示的错误完全没有npm run lint 提示的准确，所有说我们是不是可以将npm run dev和npm run lint 合并成一个命令，检测成功就继续启动服务，不然卡住，和eslint-webpack-plugin起到了一个作用。

"dev": " npm run lint && webpack-dev-server --config webpack.dev.js",

七. 检查 Git 提交的代码：

(1). 安装pre-commit，以便检查提交操作：

cnpm install pre-commit --save-dev

(2). 在package.json中增加下面配置：

{
  "pre-commit": [
    "lint"
  ]
}

八.eslint的一些问题汇总

1.当下eslint不支持.eslintignore文件，怎么办？网上说可以配置在package.json里面去，我尝试了，不行，只能用命令，用--ignore-path .eslintignore 执行忽略文件是.eslintignore 就好了。不过我看setting里面也有eslintIgnore配置项。

"lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\" --ignore-path .eslintignore"

当然我们可以在VScode的setting里面配置

{

"eslintIgnore": [

"dist/",

"node_modules/"

// 其他你想忽略的文件或目录

]

}

当然如果你的哪个文件不想要eslint检测，直接在顶部注释下也行

参看这个文件：blog.csdn.net/hzxOnlineOk…

2.现在的eslint已经不支持eslint-loader了，用eslint-webpack-plugin替换，它的目标就是在打包的时候，对代码进行检测，我觉得可以用合并命令的方式会更好些。

3.eslint --init 出来的配置文件是：babel.config.js，但是eslint插件找的配置文件叫.babelrc.js，在vscode 的setting里面指定配置文件。

开启服务

1.用webpack-dev-server启动服务

开启webpack-dev-server服务，配置devserver

然后配置命令

"start": "webpack serve --mode development --open --hot",
如果在webpack.config.js里面配置了open和hot，那么在命令里面就不用写了

注意事项：添加webpack-dev-server以后，启动项目，你可以用：npx webpack serve 也可以用：webpack-dev-server --open 他们是一样的。

测试

如果你的模块是commonJS,里面的path直接用

const path = require('path');

此时path.resolve(__dirname, 'src', 'index.js'),里面的__dirname直接用，node会在自己的模块里面找。

如果你的模块是ESM，那么获取获取__dirname，需要这么做

import path from 'node:path'
import { fileURLToPath } from 'node:url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

2.用node启动服务

当然有些人也会写个server.js，用node来启动服务比如这样

import express from 'express';
import webpack from 'webpack';
import  webpackConfig from './webpack.config.js'; // 替换为你的webpack配置文件路径
import dev from 'webpack-dev-middleware';
import hot from 'webpack-hot-middleware'

const app = express();
const compiler = webpack(webpackConfig);

app.use(dev(compiler, {
  publicPath: webpackConfig.output.publicPath,
}));

app.use(hot(compiler));

app.listen(3000, 'localhost', (err) => {
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at http://localhost:3000');
});

3.你可以利用`live-server`启动服务

你还可以这样启动服务

4.你可以用`http-server`启动服务

学到了就要用起来，虽然有点茴香的茴有几种写法，但是仔细想来，代码写程序本质不久这样吗？看起来眼花缭乱，各有千秋，但是你不会，别人会，他的工资就会比你高，是不是？

npm install http-server -g
npx http-server -v
npx http-server -p 8080 ./dist

5.利用nginx跑一下咋样？

因为我们的项目上线以后都是跑在nginx上的，如果你不了解整个过程，相关的地方就会从在短篇，不利于自己形成知识框架图。

nginx的官网

安装nginx

进入页面，输入localhost就好了

nginx 的配置文件是 conf 目录下的nginx.conf，默认配置的nginx监听的端口为80，如果80端口被占用可以修改为未被占用的端口即可

重启一下

当我们修改了 nginx的配置文件nginx.conf 时，不需要关闭 nginx 后重新启动 nginx，只需要执行命令 nginx -s reload 即可让改动生效

 `nginx -s reload`

关闭 nginx **如果使用 cmd命令窗口启动nginx，关闭 cmd窗口是不能结束nginx进程的，可使用两种方法关闭 nginx **

(1)输入nginx 命令 nginx -s stop(快速停止nginx) 或 nginx -s quit(完整有序的停止nginx)
(2)使用  taskkill /f /t /im nginx.exe

bug：当出现“'nginx' 不是内部或外部命令，也不是可运行的程序或批处理文件。”请安装添加环境变量

配置代理

配置负载均衡，多个服务器

配置静态资源静态资源配置只能放在 location / 中)

命令汇总

//开启Nginx
start nginx //启动nginx

查看是否启动成功，你可以登录浏览器，也可以执行下面命令
tasklist /fi "imagename eq nginx.exe"

//重载配置文件
nginx -s reload  //更改了配置需要重新加载

//停止Nginx nginx停止命令stop与quit参数的区别在于stop是快速停止nginx，可能并不保存相关信息，quit是完整有序的停止nginx  ，并保存相关信息。nginx启动与停止命令的效果都可以通过Windows任务管理器中的进程选项卡观察。
nginx -s stop  //快速停止Nginx服务
nginx -s quit //优雅地停止Nginx服务，确保所有正在处理的请求都已完成

//关闭不了服务就直接杀死进程
taskkill /f /t /im nginx.exe

//重启Nginx服务
nginx -s reopen //重启Nginx服务

//nginx测试是否正常
nginx -t

测试，现在我们把自己的my-ssr-project项目放到nginx上跑一下看看

nginx跑代码，就是将我们打包好的index.html,index.js文件全部复制粘贴到服务器上，然后在服务器上安装上nginx，然后把我们的代码地址配到nginx的配置文件里面去，在服务器上启动nginx服务，他会7*24小时不间断运行的，当用户访问 xxx.xxx.com/ 的时候，他就会像本地一样进入index.html然后加载index.js。

补充内容：如果你的nginx在运行命令的时候报错了

我的草原我的🐎，我想杂耍就杂耍

抛开脚手架，徒手搭建 react 项目（二）