create-react-app 构建 react应用程序 (一)(react-scripts)
来源:互联网 发布:js touchend事件 编辑:程序博客网 时间:2024/05/29 15:26
踩了一个坑又一个坑,以前都是自己手动创建react的开发环境,要安装webpack、babel、react、react-dom的组件,还需要修改、新增各种配置文件。
正为这个环境新建犯愁时,突然发现了 react-scripts。用来构建了一个项目试试:
第一步:全局安装下create-react-app。
npm install -g create-react-app
第二步:通过create-react-app来创建项目
create-react-app demo-app
第三步:使用webStorm来打开项目,为了调试router4的相关功能,所以添加对react-router-dom的依赖。
cnpm install --save-dev react-router-dom
第四部:执行
npm start
这时候浏览器会自然打开默认的index.html。自然可以看到相应的界面效果
查看项目文件结构如下:
神奇的发现,竟然没有webpack.config.js文件。点开package.json文件,看看start对应的脚本:
"start": "react-scripts start",
点开package.json,发现依赖也非常的少。
{ "name": "demo-app", "version": "0.1.0", "private": true, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1", "react-router-dom": "^4.1.1", "react-scripts": "1.0.10" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }}
一脸懵圈了,难道使用react-scripts了就不需要依赖babel、webpack、css-loader等了,又去找了一圈react-scripts的作用和原理,才明白这一切又长见识了,下节来介绍react-scripts实现的原理咯
阅读全文
0 0
- 使用 create-react-app 构建 react应用程序 (react-scripts)
- 使用 create-react-app 构建 react应用程序 (react-scripts)
- 使用 create-react-app 构建 react应用程序 (react-scripts)
- create-react-app 构建 react应用程序 (一)(react-scripts)
- 使用creat-react-app构建react程序(react-scripts)
- 构建 react应用程序 (二)(react-scripts实现原理)
- Create-react-app 构建react环境
- react脚手架create-react-app
- 使用create-react-app自动构建react项目
- 解决:使用create-react-app构建react应用很慢
- react(一):初识react
- dva构建react应用程序
- React 快速上手脚手架 create-react-app
- Create-React-App创建React项目
- react知识(一)React.createClass Vs React.Component
- React全家桶之React(一)
- 使用Facebook的create-react-app快速构建React开发环境
- 利用命令快速构建react工程(create-react-app or nwb)
- Android客户端之“微服私访”App的系统学习(二)TextInputLayout实现登录界面和LitePal初始化本地数据库
- 程序猿、设计狮、it从业人员面试时有哪儿些常见的“坑”?
- java虚拟机的内存分配策略
- jzoj. 1154. 【GDOI2003】购物
- c++ 返回多个值
- create-react-app 构建 react应用程序 (一)(react-scripts)
- Sumsets
- 结构体和位段的大小计算
- C#学习笔记:RadioButton控件与CheckBox控件的用法
- 快速解读GC日志
- java将xml转成对象
- (信源三)词典压缩器的实现--LZO算法
- 给Eclipse提速的7个技巧
- Jetty和tomcat的比较