下载掌阅APP，畅读海量书库
立即打开
问题
有时候，当你开始构建应用程序时，并不总是清楚该做出什么样的重要决策。应该创建单页面应用吗？如果性能很关键，可以使用服务端（server side）渲染吗？你需要决定使用哪种部署平台，以及使用JavaScript还是TypeScript来编写代码。
许多工具都要求你尽早回答这些问题。如果你后来改变了想法，修改应用程序构建和部署的方式可能会很复杂。
解决方案
如果你想推迟关于如何构建和部署应用程序的决定，那么应该考虑使用Razzle（ https://oreil.ly/3pZic ）。
Razzle是一个用于构建通用应用程序（ https://oreil.ly/C496O ）的工具。通用应用程序是指应用程序可以在服务器或者客户端上执行JavaScript，也可以同时在服务器和客户端上执行。
Razzle使用插件架构，可以让你改变有关如何构建应用程序的想法。它甚至可以让你改变在React、Preact或其他框架（如Elm或Vue）中构建代码的想法。
你可以使用create-razzle-app
命令创建Razzle应用程序：
这个命令在 my-app 子目录中创建新的Razzle项目。你可以用start命令启动开发服务器：
start命令将动态构建客户端代码和服务端代码，然后在端口3000上运行服务，如图1-5所示。
图1-5： http://localhost:3000 上的Razzle首页
当你希望部署应用程序的生产版本时，可以运行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 ）下载本解决方案的源代码。