1.3 用Razzle创建通用应用程序

问题

有时候，当你开始构建应用程序时，并不总是清楚该做出什么样的重要决策。应该创建单页面应用吗？如果性能很关键，可以使用服务端（server side）渲染吗？你需要决定使用哪种部署平台，以及使用JavaScript还是TypeScript来编写代码。

许多工具都要求你尽早回答这些问题。如果你后来改变了想法，修改应用程序构建和部署的方式可能会很复杂。

解决方案

如果你想推迟关于如何构建和部署应用程序的决定，那么应该考虑使用Razzle（https://oreil.ly/3pZic）。

Razzle是一个用于构建通用应用程序（https://oreil.ly/C496O）的工具。通用应用程序是指应用程序可以在服务器或者客户端上执行JavaScript，也可以同时在服务器和客户端上执行。

Razzle使用插件架构，可以让你改变有关如何构建应用程序的想法。它甚至可以让你改变在React、Preact或其他框架（如Elm或Vue）中构建代码的想法。

你可以使用create-razzle-app注3命令创建Razzle应用程序：

这个命令在my-app子目录中创建新的Razzle项目。你可以用start命令启动开发服务器：

start命令将动态构建客户端代码和服务端代码，然后在端口3000上运行服务，如图1-5所示。

当你希望部署应用程序的生产版本时，可以运行build命令：

与create-react-app不同，这条命令不仅构建客户端代码，而且创建一个Node服务器。Razzle在build子目录中生成代码。服务端代码将在运行时持续为客户端生成静态代码。你可以使用start:prod命令运行build/server.js文件来启动生产服务器：

你可以在任何能部署Node的地方部署生产服务器。

服务端和客户端都可以运行相同的代码，这使得它是通用的。但它是如何做到的呢？

客户端和服务端的代码有不同的入口点。服务端运行src/server.js中的代码，浏览器运行src/client.js中的代码。然后server.js和client.js都使用src/App.js渲染应用程序。

如果你想以单页面应用的形式运行应用程序，那么可删除src/index.js和src/server.js文件。然后在public文件夹中创建一个index.html文件，其中包含一个ID为root的＜div＞标签，接着用下面的代码重新构建应用程序：

为了每次都用单页面应用的形式构建应用程序，可在package.json文件的start与build命令中增加--type=spa选项。

这会在build/public/中生成完整的单页面应用代码，你可以将其部署到Web服务器上。

讨论

Razzle的适应性很强，因为它是由一系列可配置的插件构建而成的。每个插件都是一个高阶函数，它接收Webpack配置并返回修改后的版本。一个插件可能用来编译TypeScript代码，另一个则可能用来打包React库。

如果你想将应用程序切换到Vue，那么只需要替换要使用的插件。

你可以在Razzle网站（https://oreil.ly/UXwPv）上找到可用插件的列表。

你可以从GitHub网站（https://oreil.ly/rBR9r）下载本解决方案的源代码。