构建 React 应用

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在本地开发 React 项目的时候可以使用项目的 start 命令运行一个开发服务器,如果想把开发好的 react 应用部署到生产环境,需要先用 build 命令,生成一个构建好的 react 应用,然后可以把 build 生成的东西部署到一个 web 服务器上。

在终端,停止运行项目的开发服务可以使用快捷键 ctrl + c,然后试一下这个 build,也就是构建命令,执行 npm run build,运行一下构建命令。

这个命令会帮我们构建生成适合在生产环境中使用的 react 应用,这个应用默认会在项目的 build 这个目录的下面。你会发现这个目录的根目录下面会有一些文件,这些文件主要就是在项目的 public 目录下面的那些文件。

应用的样式,脚本还有相关的资源会放在 static 这个目录的下面。这个目录里的东西就是 build 这个命令根据项目的 src 目录里的代码构建生成的。

serve

在本地我们可以使用 serve 命令创建一台 web 服务器,让这个服务器提供 build 这个目录里的资源。我们要用的 serve 是一个 node 包,可以直接使用 npx 运行它,npx serve ,后面是 web 服务器要提供的资源目录,这里就是当前目录下面的 build 这个目录。

serve 会在本地创建一个 web 服务器,默认的地址是 localhost:3000,在浏览器上可以访问一下这个地址。现在我们看到的就是使用 build 命令构建生成的适合在生产环境上使用的 react 应用。

为了验证当前在浏览器上显示的是 build 目录里的东西,我们可以打开这个目录下在的 index.html,然后随便修改一下这个文件里的内容,比如把 title 标签里的文字改成宁皓网。保存一下文件。

回到浏览器,刷新一下应用的界面,你会看到现在这个标签上显示的文字会变成 宁皓网。说明当前显示的东西来自 build 这个目录。

构建 React 应用《 React.js:前端应用开发实践 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点