![React Cookbook中文版:87个案例带你精通React框架](https://wfqqreader-1252317822.image.myqcloud.com/cover/471/47491471/b_47491471.jpg)
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应用程序:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/26_01.jpg?sign=1739895582-5owN8l4ySp1TFMuOeWOvzCxRYDgU0Q3d-0-0375c1ef4a3e67760f0423986536e440)
这个命令在my-app子目录中创建新的Razzle项目。你可以用start命令启动开发服务器:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/26_02.jpg?sign=1739895582-u7uveu5AupDypUqIspoB3Z0Vcx0FziEr-0-6ba691b06232d671cc08cedc16a4d9f7)
start命令将动态构建客户端代码和服务端代码,然后在端口3000上运行服务,如图1-5所示。
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/26_03.jpg?sign=1739895582-MVBxistiq72AcZOIMywN6RPldcsWZxhJ-0-0e054cc573379869ab415c4489dfa5ba)
图1-5:http://localhost:3000上的Razzle首页
当你希望部署应用程序的生产版本时,可以运行build命令:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/27_01.jpg?sign=1739895582-ddoUAKH4CrmhAj7hr10fFNxQKBdnMQWs-0-433acb67012a1e09eab3289459bf5839)
与create-react-app不同,这条命令不仅构建客户端代码,而且创建一个Node服务器。Razzle在build子目录中生成代码。服务端代码将在运行时持续为客户端生成静态代码。你可以使用start:prod命令运行build/server.js文件来启动生产服务器:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/27_02.jpg?sign=1739895582-rlUwBZnuuP2qwgjVhVSjRMWepLvC7wYl-0-3d40ec15b338aa0d45c9c3ced861d6ee)
你可以在任何能部署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>标签,接着用下面的代码重新构建应用程序:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/27_03.jpg?sign=1739895582-04zQMnznWar0O8jLrbyCRRJ7bMVnm9eO-0-8a10dc7894790e3e472e97950448a478)
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/27_04.jpg?sign=1739895582-KWIburbxfKRmRfwkhNHrBBBHJ6Ys9h7c-0-d0f68360ff3d7673c5c041ad13f51942)
为了每次都用单页面应用的形式构建应用程序,可在package.json文件的start与build命令中增加--type=spa选项。
这会在build/public/中生成完整的单页面应用代码,你可以将其部署到Web服务器上。
讨论
Razzle的适应性很强,因为它是由一系列可配置的插件构建而成的。每个插件都是一个高阶函数,它接收Webpack配置并返回修改后的版本。一个插件可能用来编译TypeScript代码,另一个则可能用来打包React库。
如果你想将应用程序切换到Vue,那么只需要替换要使用的插件。
你可以在Razzle网站(https://oreil.ly/UXwPv)上找到可用插件的列表。
你可以从GitHub网站(https://oreil.ly/rBR9r)下载本解决方案的源代码。