node.js - Express 静态服务与 Webpack

Question

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

1. 只需构建并运行 index.html

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

3. 使用 webpack 和 babel 创建应用

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

标签： node.jsrestexpresswebpackbabeljs

Answer 1

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

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

在开发过程中，您可以使用 webpack 模式“开发”，它会自动将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将使用正确的 HTML 标签自动注入所有资产，例如bundle.js(.gz)、main.css等。在较新版本的 Webpack 中，不要忘记手动添加所需的插件，例如html-webpack-plugin、terser-webpack-plugin、webpack-cli，以及一些用于 Webpack 的中间件： webpack-dev-middleware、webpack-dev-middleware和webpack-pwa-manifest是一些最常用和最重要的。

希望这可以帮助您理解为什么 webpack 和 babel 几乎是前端应用程序的必需品，babel 甚至 webpack 不应该用于本机 NodeJS 服务器端代码，因为自Async/Await以来，编写尽可能多的本机支持的 ​​NodeJS 代码是最佳实践，类的使用，Promises和许多新的 Array 和可迭代的方法，如“ map ”、“ filter ”、“ reduce ”、Array.from()或“ includes ”，我认为从节点 7.1.x 开始原生支持。