前言
如果你正在开发一个使用了 MERN（MongoDB、Express、React 和 Node.js）技术栈的前端应用程序，那么你可能已经知道了，不同于传统的服务器端渲染应用程序，MERN 应用程序大多数是使用前端框架 React 构建，并且在后端使用了 Node.js + Express 提供 API，数据存储在 MongoDB 数据库中。
但是，想要正确地配置和构建一个 MERN 应用程序是一个需要花费大量时间和精力的过程，需要掌握众多的工具和技术。为了简化 MERN 应用程序的开发流程，Facebook 推出了一个名为 Create React App 的工具，用于创建一个基于 React 的前端应用程序模板，但是它还没有专门针对 MERN 应用程序的模板。
为了解决这个问题，mern.io 团队推出了一个名为 mern-scripts 的 npm 包，它提供了一套简单而又强大的工具，用于快速创建和构建 MERN 应用程序。这个包是构建 MERN 应用程序的基石，本文将详细讲解如何使用 mern-scripts 包，帮助你快速构建一个 MERN 应用程序。
安装 mern-scripts 包
首先，你需要在计算机上全局安装 Node.js 和 npm 包管理器。接着，你可以通过以下命令来安装 mern-scripts 包:
npm install -g mern-scripts
基本用法
创建一个新的 MERN 应用程序
要创建一个新的 MERN 应用程序，你可以在终端中执行以下命令：
mern init my-app cd my-app
这个命令将在当前目录下创建一个名为 my-app 的新目录，并在其中初始化一个新的 MERN 应用程序。
运行 MERN 应用程序
要启动应用程序开发服务器，只需在 my-app 目录下运行以下命令：
npm run start
然后，你可以在浏览器中打开 http://localhost:8000，查看应用程序。
编译前端代码
要编译前端代码，只需运行以下命令：
npm run build
这个命令将在 my-app/build 目录中生成一个生产就绪版本的应用程序。把这个目录的内容复制到你的服务器中，即可部署应用程序。
运行生产版本的应用程序
要启动生产版本的应用程序，只需运行以下命令：
npm run serve
这个命令将启动一个静态文件服务器，并在 http://localhost:9000 上监听客户端请求。要在生产环境中运行 MERN 应用程序，需先按照上一节所述编译应用程序。
运行测试代码
如果你想在应用程序中编写测试代码，可以使用以下命令来运行测试：
npm test
mern-scripts 使用 Jest 测试框架，所以你需要使用 Jest 语法来编写你的测试代码。
高阶用法
增加后端服务并配置代理
如果你要将 MERN 应用程序与自己的 API 服务集成（部署在不同的主机和端口上），然后将 API 请求代理到本地开发服务器，你可以在 my-app/package.json 文件中增加以下配置:
-- -------------------- ---- -------
-
-------- ------------------------
---------- -
-------- ----- -------
-------- ----- -------
-------- ----- -------
------- ----- -----
-
-这个配置项设置了代理选项，告诉 webpack 开发服务器发送请求时，应该将请求代理到主机名为 localhost、端口为 3000 的服务器上。如果你没有提供 API 域名和端口，那么这个代理配置项将是你最好的选择。
配置 Redux 增强工具
在开发过程中，你可能需要使用 Redux 开发应用程序的状态管理，mern-scripts 包提供了 Redux 浏览器增强工具来帮助你调试和监控 Redux 状态。
你只需要在你的应用程序的主入口点中增加以下代码即可：
import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore } from 'redux'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
composeWithDevTools()
);作为这个配置的一部分，你需要确保在开发过程中安装 Redux DevTools Extension 浏览器扩展程序。如果你正在使用 Google Chrome 浏览器，你可以从 Chrome Web Store 下载它；如果你使用的是其他浏览器，则需要查找适用于该浏览器的版本。
修改 webpack 配置
如果你需要修改 webpack 配置文件以支持不同的源代码结构（如 Sass 或 LESS 样式表语言、TypeScript 等），可以在项目根目录下创建一个名为 mern.config.js 的文件，并在其中覆盖 mern-scripts 中的默认配置。以下是一个使用 Sass 的示例配置：
-- -------------------- ---- -------
-------------- - -
-------- -------- - ------- -- -- -
--------------------------
----- ----------
---- -
- ------- -------------- --
- ------- ------------ --
- ------- ------------- -
-
---
------ -------
-
-这个配置向 webpack 添加了一个新的 Sass 风格表加载器，并从 Sass 文件中解析样式表。
结论
通过使用本文中介绍的技术和工具，你可以在短时间内构建一个 MERN 应用程序，而不需要花费大量时间来配置并使用复杂的工具链。mern-scripts 包提供了丰富的功能，可以使你的应用程序开发和部署流程变得更加快速和简便。
如果在使用中有任何问题或问题，请查看 mern-scripts 文档，或者在 mern.io 社区论坛 上发布问题。祝你在构建 MERN 应用程序中成功和愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567fa81e8991b448e41fa