React项目的打包步骤

简介: React项目的打包步骤
+关注继续查看

1.create-react-app 

来自Facebook官方的零配置命令行工具。create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板,有助于初学者快速上手实践。安装create-react-app的方式也非常简单,可以直接使用 npm 命令进行全局安装。



npm install -g create-react-app   //全局安装create-react-app

create-react-app my-app   //创建一个my-app 文件夹

cd my-app/    //转到 my-app文件夹

npm start    //运行


2.打包编译

执行完上述命令,打开本地浏览器,输入localhost:3000,就能看到项目的运行效果。此时是开发模式。


若使用 npm run build,代码会被编译到build目录。将整个应用打包发布,自动试用webpack进行压缩与优化。


在项目路径下,敲npm run build,就出现了build文件夹,同时终端显示一些文字:大致意思是:已经编译好啦。build生成的这些东西要放在服务器root下


3.充当静态的服务器,在本地也能浏览

敲:npm install -g serve,在敲serve -s build,就可以了。

image

就可以在本地地址:http://localhost:5000浏览了 。

目录
相关文章
|
8天前
|
前端开发 JavaScript
在React项目中使用 CSS Module
在React项目中使用 CSS Module
|
19天前
|
前端开发
react项目如何修改默认3000端口号
react项目如何修改默认3000端口号
14 0
|
19天前
|
前端开发
使用concurrently模块-同时启动react项目和mock模拟接口
使用concurrently模块-同时启动react项目和mock模拟接口
15 0
|
1月前
|
存储 前端开发
react 实现低耦合 拖拽项目的思路
react 实现低耦合 拖拽项目的思路
30 0
|
2月前
|
前端开发 应用服务中间件 nginx
简单几步,将React项目脚手架Webpack换成Vite⚡⚡,附带性能比较和思考
简单几步,将React项目脚手架Webpack换成Vite⚡⚡,附带性能比较和思考
|
2月前
|
前端开发 JavaScript Cloud Native
Vue.js vs React:哪一个更适合你的项目?
Vue.js vs React:哪一个更适合你的项目?
24 0
|
3月前
|
前端开发 JavaScript
React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)
React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)
54 0
|
3月前
|
前端开发 JavaScript
React 配置别名 @ ( js/ts 项目中通过 @craco/craco 配置)
React 配置别名 @ ( js/ts 项目中通过 @craco/craco 配置)
59 0
|
3月前
|
前端开发 应用服务中间件 nginx
部署react项目到服务器
部署react项目到服务器
|
4月前
|
JavaScript 前端开发 编译器
TypeScript深度剖析:React 项目中应用 TypeScript?
TypeScript深度剖析:React 项目中应用 TypeScript?
48 0
相关产品
云迁移中心
推荐文章
更多