Express 静态服务与 Webpack答案

【问题标题】：Express static serve vs. WebpackExpress 静态服务与 Webpack
【发布时间】：2020-03-08 18:56:17
【问题描述】：

最近我一直在思考 React 应用的创建和服务方式。在互联网上运行该应用程序有三种最流行的方式：

只需构建并运行 index.html
使用 express.static 构建和提供 index.html
使用 webpack 和 babel 创建应用

创作的不同之处是什么？最好的方法是什么？我只能通过使用 webpack 来拥有后端逻辑吗？我是否错过了如何创建反应应用程序的其他方式？

【问题讨论】：

只有一个好的/正确的选择，那就是使用 Webpack 和 babel。为什么这是我在答案中详细说明的，但 Express 是服务器端，而您谈论的是反应，那是前端。如果还包括服务器和后端/服务器端 Express 应用程序来提供 API 和 React 应用程序，最佳做法是将代码划分在不同的目录中，为此我将使用 Docker btw ...
一个非常好的 React 应用样板例如是 reactboilerplate.com 或者 Dockerized Full Stack Mongodb/Express API/React App 和服务器 nginx 配置等的示例可以找到 github.com/denisolek/docker-node-mongo-react-STARTER

标签： node.js rest express webpack babeljs

【解决方案1】：

只需构建并运行 index.html

我假设您的意思是没有服务器。如果您不需要使用任何安全资源或服务器端资源，这可以正常工作。这也意味着要加载页面，您需要拥有文件和关联文件的副本。

使用 express.static 构建和提供 index.html

这仅与 #1 不同，因为服务器负责将这些文件发送到浏览器。这很方便，因为您实际上可以从外部访问 URL，而且它还可能使您的代码能够在线访问安全资源。

使用 webpack 和 babel 创建应用

这与您提供文件的方式无关。您可能仍然想要/需要一台服务器。这与你是否使用 Express 完全无关。

最好的方法是什么？

取决于您的需求。就个人而言，我发现 Webpack 很麻烦，所以在搞砸了几年并浪费时间配置它之后，我切换回了 Browserify。但是，有很多人喜欢 Webpack，而且肯定有一个可用的插件生态系统，您可能会发现它对您的项目很有用。使用你需要的东西。

我可以只使用 webpack 来拥有后端逻辑吗？

完全、完全、100% 不相关。 Webpack 用于制作您的客户端捆绑包。与你在服务器端使用什么无关。

我是否错过了一些其他方法来创建反应应用程序？

你可以只使用 React 和 Babel。技术上不需要 Webpack，但 Webpack 或同等工具会让你的生活更轻松。

【讨论】：

【解决方案2】：

如果您只想在生产环境中提供服务，请创建一个 Express JS 服务器来为您的生产环境提供服务。但是您仍然需要构建源代码，因此由于我在开发过程中使用 Webpack，我更喜欢 Webpack 并将 Express JS 服务器文件添加到您创建的名为 server 的单独目录中，设置和配置您的 Express JS 静态服务器，这可能使用单独的配置文件来添加 logger, port, argv 到服务器目录，并将服务器相关的中间件放置到目录中server 目录下的 middlewares 用于不同的环境，因此可以是 addDevMiddlewares.js、addProdMiddlewares.js 和 >frontendMiddleware.js。然后只需将服务器用于所有环境，例如："start:prod": "cross-env NODE_ENV=production node server 和 start:cross -env NODE_ENV=development node server。它提供/包含许多东西。它将转译、lint、缩小、压缩与 gzip 用于生产和 babel 将确保在您使用 ES6 方法/函数和语法编写代码时将您的代码转换为早期兼容的 Vanilla JS 版本（如 ES5）以支持旧版浏览器，我知道如果不编写 TypeScript，您会喜欢使用 ES6 .

Webpack 还包括将资源复制到构建文件夹，例如图像、视频等...

在开发过程中，您可以使用 webpack 模式 'development'，它会自动将 NODE_ENV 设置为 dev 和出于调试目的，不要缩小和压缩 bundle.js 文件。 Webpack 还有一个带有热重载功能的开发服务器。将应用构建为静态 HTML/CSS 和 JS 文件时。

调用 index.html 将不起作用，因为您应该调用 JavaScript 文件 index.js 或 app.js 并且这是在 webpack.dev 中指定的.babel.js 和 webpack.prod.babel.js 扩展了基本或通用的 webpack 配置，例如在 webpack.base.babel.js 内部使用 HtmlWebpackPlugin 导入/要求 index.html 文件作为模板。如何将模板构建或拆分为逻辑组件取决于您。您可以将所有内容放在一个模板文件 index.html 中，但它也可以只包含唯一需要的元素，它可以/应该是一个简单的 <div id="app"></div> 因为可能页眉和页脚文件可以包含 doctype、head 和 body 的开头，例如一个带有警告的标签，如果他们看到这个文本，则 JavaScript 已在他们的浏览器中被禁用。

Webpack 和更具体的 HtmlWebpackPlugin 将自动注入所有资产，例如 bundle.js(.gz)、main.css 等... 使用正确的 HTML 标签。在较新版本的 Webpack 中，不要忘记手动添加所需的插件，例如 html-webpack-plugin、terser-webpack-plugin、webpack-cli， 一些用于 Webpack 的中间件：webpack -dev-middleware、webpack-dev-middleware 和 webpack-pwa-manifest 是一些最常用和最重要的。

希望这可以帮助您理解为什么 webpack 和 babel 几乎是前端应用程序的必备工具，babel 甚至 webpack 不应该用于本机 NodeJS 服务器端代码，因为编写尽可能多的本机支持的 NodeJS 代码当然是最佳实践，因为Async/Await，类的使用，Promises > 以及许多新的 Array 和可迭代 方法，例如 'map'、'filter'、'reduce'、Array.from() 或 'includes' 原生支持。

【讨论】：