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,就可以了。
就可以在本地地址:http://localhost:5000浏览了 。
React项目的打包的更多相关文章
- React项目的打包与部署到腾讯云
腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法.项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题.下面来具体梳理下: create-react-app 来自F ...
- 将本地的react项目代码打包到服务器
打包过程 连接服务器 ssh root@xx.xx.xx.xx(服务器IP) 定位到当前项目目录 cd /path/projectName 更新代码到服务器 git pull 执行打包命令(这里我创建 ...
- react build 后打包发布总结
一,部署在apache web服务器上(wamp | xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决. 设置A ...
- React项目构建(利用webpack打包)
引言 最近React作为当前最为火热的前端框架.最近也相继而出来相关ES7的新语法. 当然,在使用React开发web项目的时候,不得不提到的就是与之配套的相应的打包技术,之前上文已经简单的提到Rea ...
- React项目打包并部署到 Github 展示预览效果
React项目打包并部署到 Github 展示预览效果 当开发者模式结束,准备打包的时进行以下步骤: 在package.json配置文件中加一句: "homepage": &quo ...
- react项目打包后路径找不到,项目打开后页面空白的问题
使用 npm install -g create-react-app快速生成项目脚手架打包后出现资源找不到的路径问题: 解决办法:在package.json设置homepage
- react native ios打包到真机
每当在模拟器上完成了开发,都想到真机上秀秀,正好前段时候买了一个mac,哈哈有机会了.前篇文章以android为例,这里就以ios为例,讲一下打包到iphone真机的流程. 一.前置 1.首先你得有一 ...
- React项目模板-从项目搭建到部署
前一段时间做了一个小项目,时间比较紧,就一个人月.最终希望能够通过微信公众号链接启动应用. 项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验. 技术选型 参考范围大致三种:Ang ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
随机推荐
- Apache Shiro去掉URL中的JSESSIONID
如果你的shiro版本在1.3.2版本以上这个BUG已经解决只需要在配置文件如下配置中添加红色部分 <!-- 会话管理器 --> <bean id="sessionMana ...
- Android之常用开发框架
1.Rajawali介绍:安卓的OpenGL ES 2.0/3.0 引擎.可以用于制作普通应用或者动态壁纸,当然也可以用于制作游戏.项目地址: https://github.com/Rajawali/ ...
- Hadoop 基础概念
Hadoop就是一个实现了Google云计算系统的开源系统,包括并行计算模型Map/Reduce,分布式文件系统HDFS,以及分布式数据库Hbase,同时Hadoop的相关项目也很丰富,包括ZooKe ...
- AutoCompleteTextView 和 MultiAutoCompleteTextView 自动完成文本控件
概述 在html中有很多自动完成的应用,例如,百度的搜索,输入一些关键字,下面就会自动列出该关键字对应的一些消息 在Android中也有自动完成文本,这就是AutoCompleteTextVeiw和M ...
- C# 调用C++动态库注意事项
C# 调用C++动态库注意事项 最近项目上需要在C#中调用C++,期间遇到不少坑,总结如下: 1.in const char* 对应C#中string 或 IntPtr 2.out const ...
- sqlite初识
最近在部署PHP网站项目的时候,发现项目并没有使用传统的三大关系型数据库,而是采用了sqlite数据库,以前的时候,也见过sqlite,但是并没有深入了解其功能和用法,好奇心驱使,决定好好研究一下sq ...
- Entity Framework 6 暂停重试执行策略
EF6引入一个弹性连接的功能,也就是允许重新尝试执行失败的数据库操作.某些复杂的场景中,可能需要启用或停用重试执行的策略,但是EF框架暂时尚未提供直接的设置开关,将来可能会加入这种配置.幸运的是,很容 ...
- Ubuntu16.04中把默认JAVA设置为Oracle的JDK!
系统当中已经存在了OpenJDK,默认的JDK是它,并不是Oracle的JDK,执行下面操作就可以把Oracle的JDK设置为默认的了! 首先假设我们已经把Oracle的JDK安装和配置好了,但是就是 ...
- coffee主题美化内容概要
1.具备自动生浮动标题目录(可隐藏) 2.页首目录概要 3.主标题有明显的标志背景颜色,二级标题缩进合适 4.一级.二级标题下图片缩进合适 5.博客签名 6.背景音乐列表 7.打赏 8.联系方式(QQ ...
- 爬虫开发7.scrapy框架简介和基础应用
scrapy框架简介和基础应用阅读量: 1432 scrapy 今日概要 scrapy框架介绍 环境安装 基础使用 今日详情 一.什么是Scrapy? Scrapy是一个为了爬取网站数据,提取结构性数 ...