React 和 Express 的 NPM 备忘单

每当我开始一个新项目时，我经常会发现自己会从以前的项目中复制一些设置样板。我相信我不是唯一一个这样做的人。

因此，我整理了一份快速备忘单，其中包含一些使用 React 和 Express 构建应用时需要安装的最重要的 NPM 软件包。虽然此设置主要针对 CRUD 应用，但您也可以参考其中的各个部分（例如React和Redux部分）。

您的首选设置可能与我的不同，因此如果您觉得我忽略了一些您最喜欢的 NPM 包（或者如果您不同意我的某些选择），请随时在评论中告诉我！

除非另有说明，每个包都可以这样安装：npm install NAME

目录

后端

• 快速设置

• 可选快递包裹

• 数据库设置

  • PostgreSQL
  • MongoDB

前端

• React 设置
  • Webpack
  • Webpack 可选
  • 反应
  • 对于 React 可选
• Redux 设置
• Redux 可选

后端

快速设置

• 表达
• cookie解析器
  • 解析 cookie 标头并使用以 cookie 名称为键的对象填充 req.cookies。
• nodemon （开发依赖）
  • 在进行任何更改后重新启动服务器，node这与标准命令不同，标准命令不会响应运行后所做的更改。
  • 像这样在脚本中使用start：nodemon server.js
  • 虽然不是绝对必要的，但会大大提高您作为开发人员的效率。
• 加密
  • 用于散列和验证密码（及其他信息）的流行身份验证工具
  • 随意使用其他身份验证解决方案，例如Passport.js
• 注意：body-parser已弃用。json和url-encoded功能可以通过 Express 原生方法实现：

  app.use(express.urlencoded({ extended: true }));
  app.use(express.json());

可选快递包裹

• 同时
  • 用于同时运行多个 npm 命令。
  • 在类 UNIX 环境（例如 Mac）中没有必要，可以使用 &（并行运行所有命令）或 &&（等待前一个命令完成后再运行）链接命令
• dotenv
  • 将环境变量从 .env 文件加载到 process.env 中
  • 有助于将私人信息（例如 API 密钥）保留在公共存储库之外
  • 使用示例：
  • 将 API 密钥作为变量存储在 中.env。
  • 添加.env到您的.gitignore文件，以便该文件不会添加到您的 repo 中。
  • 安装 dotenv 后，您可以通过引用访问该 API 密钥变量process.env，例如process.env.VARIABLE

数据库设置

PostgreSQL

• 节点-postgres
  • 注意：使用npm install pg!安装
  • 让 node.js（和 Express）与 PostgreSQL 数据库交互

MongoDB

• 猫鼬
  • MongoDB 的强大包装器，可处理验证、转换和业务逻辑样板。
  • Mongoose 的核心功能之一是它能够为 MongoDB 集合创建模式。

前端

React 设置

如果您正在使用，则可以忽略此部分create-react-app！

Webpack

安装所有与 webpack 相关的包作为开发依赖项。

• webpack
• webpack-cli
  • Webpack 的官方 CLI（命令行界面），提供许多便捷的命令，例如创建新的 webpack 配置或将项目从一个版本迁移到另一个版本。
• webpack-dev-server
  • 为 webpack 提供开发服务器，并具有实时重新加载功能
  • 推荐的 NPM 脚本："start:dev": "webpack-dev-server"
• @babel/核心
  • Babel 编译器核心
• @babel/preset-env
  • 智能预设可让您使用最新的 JavaScript 功能，而不必担心目标环境需要哪些语法转换和浏览器填充。
• @babel/preset-react
  • 适用于所有 React 插件的 Babel 预设
• babel-loader
  • 让你使用 Babel 和 Webpack 转换文件
• css加载器
  • 解释CSS@import文件url()
• 样式加载器
  • 将 CSS 注入 DOM

Webpack 可选

• sass-loader
  • 加载 Sass/SCSS 文件并将其编译为 CSS。
  • 仅当您使用 Sass 时才有必要...您可能应该使用它。

反应

• 反应
• 反应DOM
  • 作为 React DOM 和服务渲染器的入口点。应与react上面的通用包配对使用。

对于 React 可选

• react-router-dom
  • 执行客户端路由，无需联系服务器。
  • 让您在 Web 设置中使用 React Router（react-router-native也可用于 React Native）。
  • 请访问官方网站了解更多信息。
• 节点-sass
  • 本地自动将 .scss 文件编译为 CSS。
  • 让您直接在 React 中使用 .scss 文件，这很棒。

Redux 设置

• 重新制作
• react-redux
  • 请注意，还需要安装 React 专用版本的 Redux，因为 Redux 可以与各种框架一起使用 - 甚至是 Vanilla JS。

Redux 可选

注意： Thunk 和 Saga 都用于让 Redux 执行异步操作。你可以选择其中一种，但 Thunk 是目前更受欢迎的选择。

对于 Redux Thunk：

• redux-thunk

  • Redux 中 thunk 的深入介绍

对于 Redux Saga：

• redux-saga

  • 官方网站上写道：“你可能redux-thunk之前用过它来处理数据获取。与 redux thunk 不同，它不会让你陷入回调地狱，你可以轻松地测试异步流程，并且你的操作仍然保持纯粹。”

Redux saga 可能需要这些软件包才能正常运行：

• 再生器运行时
  • Regenerator编译的生成器和async函数的独立运行时
• core-js
  • JavaScript 的模块化标准库

我遗漏了什么吗？请在下方留言！