简述--构建React项目的几种方式
前言:
构建React项目的几种方式:
- 构建:create-react-app 快速脚手架
- 构建:generator-react-webpack
- 构建:webpack一步一步构建
1)构建:create-react-app 快速脚手架
FaceBook官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具create-react-app。
creat-react-app优点
- 无需配置:官方的配置堪称完美,几乎不用你再配置任何东西,就可以上手开发项目。
- 高集成性:集成了对React,JSX,ES6和Flow的支持。
- 自带服务:集成了开发服务器,你可以实现开发预览一体化。
- 热更新:保存自动更新,让你的开发更简单。
- 全兼容性:自动处理CSS的兼容问题,无需添加-webkit前缀。
- 自动发布:集成好了发布成品功能,编译后直接发布,并且包含了sourcemaps功能。
create-react-app的安装
1
2
|
npm install -g create-react-app # Windows sudo npm install -g create-react-app # Linux |
创建React项目
1
|
create-react-app my-appcd my-appnpm start |
2)构建:generator-react-webpack
1
2
|
npm install -g yo # 在全局安装generator-react-webpack之前,先安装yeoman npm install -g generator-react-webpack |
1
|
mkdir new -react-democd new -react-demoyo react-webpacknpm start |
3)构建:webpack一步一步构建
安装webpack
在安装webpack之前,我们先建立一个文件夹并进入,当然你可以用其他方法,我这里就用命令了。
1
2
|
mkdir react-webpack cd react-webpacknpm initnpm install --save-dev webpack |
配置webpack.config.js
在项目根目录建立webpack.config.js文件,这个文件是进行webpack配置的,先建立基本的入口和出口文件。
1
2
3
4
5
6
7
8
9
10
|
var path =require( 'path' ); module.exports = { //入口文件 entry: './app/index.js' , //出口文件 output:{ filename: 'index.js' , path:path.resolve(__dirname, 'dist' ) } } |
新建index.html文件,在根目录新建index.html文件,并引入webpack设置中的出口文件,代码如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <meta http-equiv= "X-UA-Compatible" content= "ie=edge" > <title>React全家桶-jspang</title> </head> <body> </body> <!--引入出口文件--> <script src= "./dist/index.js" ></script> </html> |
测试webpack配置
通过上面的步骤,配置好了wbpack,现在可以测试一下我们webpack配置是否有问题。在路口文件中写入下面的代码,并进行打包测试。
/app/index.js文件
1
2
3
4
5
6
7
|
function component(){ var element = document.createElement( 'div' ); element.innerHTML = ( 'Hello JSPang' ); return element; } document.body.appendChild(component()); |
这段代码非常简单,不作过多的解释。如果你对这个代码看不懂,再去啃两边犀牛或者红宝书。
加入打包命令
打开package.json文件,在scripts属性中加入build命令。
1
2
3
|
"scripts" : { "build" : "webpack" }, |
在终端中输入npm run build ,就可以看到打包结果了。如果没有出现错误,在浏览器中打开,可以看到我们的编写结果。到这部为止,我们正确安装了webpack,并进行了出入口的配置,也看到了webpack的输出结果。
开发服务器配置
你会很容易的发现,我们现在缺少一个实时更新的服务,那动手马上配置一个。
在命令行安装webpack-dev-server,在终端中输入下面的命令。
1
|
cnpm install --save-dev webpack-dev-server |
安装完成后,配置webpack.config.js文件。
1
2
3
4
5
6
|
devServer:{ contentBase: './' , host: 'localhost' , compress: true , port:1717 } |
配置好后再packeage.json里增加一个scripts命令,我们起名叫server。
1
2
3
4
|
"scripts" : { "build" : "webpack" , "server" : "webpack-dev-server --open" }, |
这里的–open是直接打开浏览器的意思。这些都配置完成后,就可以在终端输入npm run server 看到结果了。
自动刷新浏览器
在我们修改代码时,现在并不能自动刷新浏览器,不会立即呈现我们编写的代码结果,而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。
1
2
3
4
5
|
output:{ filename: 'index.js' , path:path.resolve(__dirname, 'dist' ), publicPath: 'temp/' }, |
index.html文件引入JS
<script src="./temp/index.js"></script>
Babel安装配置
在webpack中配置Babel需要先加入babel-loader,这里我们继续使用npm来进行安装,但是我们一般还需要支持es2015和React,所以要安装四个包。
1
|
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react |
这里安装四个包的安装,这个四个包不能省略。安装后你会在package.json里看到这些包的版本。
1
2
3
4
5
6
7
8
|
"devDependencies" : { "babel-core" : "^6.26.0" , "babel-loader" : "^7.1.2" , "babel-preset-es2015" : "^6.24.1" , "babel-preset-react" : "^6.24.1" , "webpack" : "^3.8.1" , "webpack-dev-server" : "^2.9.3" } |
配置module
在安装完成后,可以到webpack.config.js里配置module,也就是配置我们常说的loader。
1
2
3
4
5
6
7
8
9
10
11
12
|
module:{ loaders:[ { test:/\.js$/, exclude:/node_modules/, loaders: "babel-loader" , query:{ presets:[ 'es2015' , 'react' ] } } ] } |
编写React
webpack通过上边的步骤,基本已经配置完成了,这里我们写一个React文件来进行测试一下。在进行编写React文件前,要记得安装React和React-dom这两个包。
安装React和React-dom
cnpm install --save react react-dom
安装完成后,我们改写app/index.js文件,把原来原生的JavaScript代码改成React代码。
index.js
1
2
3
4
5
6
7
|
import React from 'react' ; import ReactDOM from 'react-dom' ; ReactDOM.render( <div>Hello JSPang</div>, document.getElementById( "app" ) ); |
因为上边我们加了一个app的选择器,所以在index.html中增加一个div标签,并把id设置成app。
index.html
<div id="app"></div>
都配置完了,我们可以用之前配置好的npm run server 命令进行预览了。如果在浏览器中看到了Hello JSPang 这段文字,说明我们的配置成功了,以后就可以愉快的进行开发了。
总结:其实自己配置React开发环境在实际工作中也并不多,因为我们的配置毕竟不是很成熟,而且支持较少。这里学习只是为了你更好的掌握React构建过程和设置参数,实际工作中尽量使用合适的脚手架工具。
转载自:jspang.com/2017/10/22/react-all-01/
webpack.config.js的完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
var path = require( 'path' ); module.exports = { // 入口文件 entry: './app/index.js' , // 服务器配置 devServer: { contentBase: './' , host: 'localhost' , compress: true , port: 1717 }, // 配置Babel module:{ loaders:[ { test:/\.js$/, exclude:/node_modules/, loaders: "babel-loader" , query:{ presets:[ 'es2015' , 'react' ] } } ] }, // 出口文件 output: { filename: 'index.js' , path: path.resolve(__dirname, 'dist' ), publicPath: 'temp/' } } |
简述--构建React项目的几种方式的更多相关文章
- Eclipse中构建maven项目的两种方式
Eclipse中构建maven项目的两种方式 方式一: 1.构建maven项目 1.1 新建meven项目,可在Other中找到maven文件夹 1.2 进入maven项目后,点击next 1.3 在 ...
- 创建react项目的几种方法
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- vue安装及创建项目的几种方式
原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式 VUE安装的方式 直接用 script标签 引入 对于制作原型或学习,你可以这样使用最新版本: ...
- Eclipse导入SVN项目的三种方式
Eclipse导入SVN项目的三种方式 一.直接Import导入: 1.点击 File --> Import,进入导入项目窗口 2.选择从SVN检出项目,点击Next 3.选择创建新的资源库位置 ...
- 在Tomcat中部署web项目的三种方式
搬瓦工搭建SS教程 SSR免费节点:http://www.xiaokeli.me 在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Man ...
- tomcat发布web项目的三种方式
tomcat发布web项目的三种方式 方式一: 配置tomcat 安装目录下的conf/server.xml <Host name="loaclhost">标签里面添加 ...
- Solon 开发,三、构建一个Bean的三种方式
Solon 开发 一.注入或手动获取配置 二.注入或手动获取Bean 三.构建一个Bean的三种方式 四.Bean 扫描的三种方式 五.切面与环绕拦截 六.提取Bean的函数进行定制开发 七.自定义注 ...
- 技本功丨利用 Atomic 构建 React 项目工作流,so easy!
近日刷微博,#2018年结婚率创新低#荣登热门话题NO.1,沪浙最不积极. 生活压力越大,缺爱的人也越来越多...据本萌的不完全观察,程序猿虽然是压力加成的职业,在袋鼠云还是有不少早早脱了单.至于,脱 ...
- 彻底了解构建 JSON 字符串的三种方式
原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7701856.html 前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax ...
随机推荐
- 第54天:原生js实现轮播图效果
一.轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片. 二.Html布局 首先父容器containe ...
- 第三章 AOP
什么是AOP AOP的编写方式 什么是AOP? 是一种面向切面的思想,关注的是切面中的相似功能,将这些功能抽离出来,提高代码的复用性 AOP术语 advice-通知:要执行的任务 Spring切面有5 ...
- BZOJ 1202 狡猾的商人(带权并查集)
给出了l,r,w.我们就得知了s[r]-s[l-1]=w.也就是说,点l-1和点r的距离为w. 于是可以使用带权并查集,定义dis[i]表示点i到根节点的距离.查询和合并的时候维护一下就OK了. 如果 ...
- 《转》'autocomplete="off"'在Chrome中不起作用解决方案
最近项目中遇到一个令人头疼的问题,查阅各种资料,尝试各种方法,最终得以解决:哎···下面就说说这心酸的历程吧. 大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值 ...
- poj 1719 Shooting Contest (二分匹配)
Shooting Contest Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3812 Accepted: 1389 ...
- hdu 1879 继续畅通工程 (最小生成树)
继续畅通工程 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- 前台界面(2)---CSS 样式
目录 1. 内联样式 2. 层叠样式表CSS 2.1. 类选择器 2.1.1. 颜色设置 2.1.2. 字号设置 2.1.3. CSS边框属性 2.1.4. 设置背景颜色 2.1.5. 设置布局边框 ...
- CF#508 1038E Maximum Matching
---题面--- 题解: 感觉还是比较妙的,复杂度看上去很高(其实也很高),但是因为n只有100,所以还是可以过的. 考虑一个很暴力的状态f[i][j][x][y]表示考虑取区间i ~ j的方格,左右 ...
- BZOJ2434:[NOI2011]阿狸的打字机——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=2434 https://www.luogu.org/problemnew/show/P2414 打字 ...
- [bzoj] 1068 压缩 || 区间dp
原题 f[i][j][0/1]表示i-1处有一个M,i到j压缩后的长度,0/1表示i到j中有没有m. 初始为j-i+1 f[i][j][0]=min(f[i][j][0],f[i][k][0]+j-k ...