【ReactJS】React项目构建的几种方式

2024-09-07 22:58

本文主要是介绍【ReactJS】React项目构建的几种方式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:

构建React项目的几种方式:

  1. 构建:create-react-app 快速脚手架
  2. 构建:generator-react-webpack
  3. 构建:webpack一步一步构建

1)构建:create-react-app 快速脚手架

FaceBook官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具create-react-app。

creat-react-app优点

  • 无需配置:官方的配置堪称完美,几乎不用你再配置任何东西,就可以上手开发项目。
  • 高集成性:集成了对React,JSX,ES6和Flow的支持。
  • 自带服务:集成了开发服务器,你可以实现开发预览一体化。
  • 热更新:保存自动更新,让你的开发更简单。
  • 全兼容性:自动处理CSS的兼容问题,无需添加-webkit前缀。
  • 自动发布:集成好了发布成品功能,编译后直接发布,并且包含了sourcemaps功能。

create-react-app的安装

npm install -g create-react-app       # Windows
sudo npm install -g create-react-app  # Linux

创建React项目

create-react-app my-app

进入这个文件夹

cd my-app

启动服务

npm start

2)构建:generator-react-webpack

安装

npm install -g yo   # 在全局安装generator-react-webpack之前,先安装yeoman
npm install -g generator-react-webpack

创建目录

mkdir new-react-demo

进入这个文件夹

cd new-react-demo

用生成器生成我们的项目目录

yo react-webpack

启动服务

npm start

3)构建:webpack一步一步构建

安装webpack

在安装webpack之前,我们先建立一个文件夹并进入,当然你可以用其他方法,我这里就用命令了。

mkdir react-webpack
cd react-webpack

进入文件夹后对我们的webpack项目进行初始化,命令如下:

npm init

初始化成功后可以在项目根目录下看到package.json文件。package.json文件建立好以后,你可以安装webpack了。

npm install --save-dev webpack

建议使用cnpm来进行安装,这样速度会快很多。安装好后,你会在package.json里看到你安装的版本号。这样我们webpack就安装好了。

配置webpack.config.js

在项目根目录建立webpack.config.js文件,这个文件是进行webpack配置的,先建立基本的入口和出口文件。

var path =require('path');
module.exports = {//入口文件entry:'./app/index.js',//出口文件output:{filename:'index.js',path:path.resolve(__dirname,'dist')}
}

新建index.html文件

在根目录新建index.html文件,并引入webpack设置中的出口文件,代码如下。

<!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文件

function component(){var element = document.createElement('div');element.innerHTML = ('Hello JSPang');return element;
}document.body.appendChild(component());

这段代码非常简单,不作过多的解释。如果你对这个代码看不懂,再去啃两边犀牛或者红宝书。

加入打包命令

打开package.json文件,在scripts属性中加入build命令。

"scripts": {"build": "webpack"},

在终端中输入npm run build ,就可以看到打包结果了。如果没有出现错误,在浏览器中打开,可以看到我们的编写结果。到这部为止,我们正确安装了webpack,并进行了出入口的配置,也看到了webpack的输出结果。

开发服务器配置

你会很容易的发现,我们现在缺少一个实时更新的服务,那动手马上配置一个。

在命令行安装webpack-dev-server,在终端中输入下面的命令。

cnpm install --save-dev webpack-dev-server

安装完成后,配置webpack.config.js文件。

devServer:{contentBase:'./',host:'localhost',compress:true,port:1717
}

配置好后再packeage.json里增加一个scripts命令,我们起名叫server。

"scripts": {"build": "webpack","server": "webpack-dev-server --open"},

这里的–open是直接打开浏览器的意思。这些都配置完成后,就可以在终端输入npm run server 看到结果了。

自动刷新浏览器

在我们修改代码时,现在并不能自动刷新浏览器,不会立即呈现我们编写的代码结果,而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。

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,所以要安装四个包。

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

这里安装四个包的安装,这个四个包不能省略。安装后你会在package.json里看到这些包的版本。

"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。

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

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的完整代码

var path = require('path');module.exports = {// 入口文件entry: './app/index.js',// 服务器配置devServer: {contentBase: './',host: 'localhost',compress: true,port: 1717},// 配置Babelmodule:{loaders:[{test:/\.js$/,exclude:/node_modules/,loaders:"babel-loader",query:{presets:['es2015','react']}}]},// 出口文件output: {filename: 'index.js',path: path.resolve(__dirname,'dist'),publicPath: 'temp/'}
}

这篇关于【ReactJS】React项目构建的几种方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1146400

相关文章

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

配置springboot项目动静分离打包分离lib方式

《配置springboot项目动静分离打包分离lib方式》本文介绍了如何将SpringBoot工程中的静态资源和配置文件分离出来,以减少jar包大小,方便修改配置文件,通过在jar包同级目录创建co... 目录前言1、分离配置文件原理2、pom文件配置3、使用package命令打包4、总结前言默认情况下,

Java文件与Base64之间的转化方式

《Java文件与Base64之间的转化方式》这篇文章介绍了如何使用Java将文件(如图片、视频)转换为Base64编码,以及如何将Base64编码转换回文件,通过提供具体的工具类实现,作者希望帮助读者... 目录Java文件与Base64之间的转化1、文件转Base64工具类2、Base64转文件工具类3、

java获取图片的大小、宽度、高度方式

《java获取图片的大小、宽度、高度方式》文章介绍了如何将File对象转换为MultipartFile对象的过程,并分享了个人经验,希望能为读者提供参考... 目China编程录Java获取图片的大小、宽度、高度File对象(该对象里面是图片)MultipartFile对象(该对象里面是图片)总结java获取图片

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

Java通过反射获取方法参数名的方式小结

《Java通过反射获取方法参数名的方式小结》这篇文章主要为大家详细介绍了Java如何通过反射获取方法参数名的方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、解决方式方式2.1: 添加编译参数配置 -parameters方式2.2: 使用Spring的内部工具类 -

MySQL修改密码的四种实现方式

《MySQL修改密码的四种实现方式》文章主要介绍了如何使用命令行工具修改MySQL密码,包括使用`setpassword`命令和`mysqladmin`命令,此外,还详细描述了忘记密码时的处理方法,包... 目录mysql修改密码四种方式一、set password命令二、使用mysqladmin三、修改u

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

java如何通过Kerberos认证方式连接hive

《java如何通过Kerberos认证方式连接hive》该文主要介绍了如何在数据源管理功能中适配不同数据源(如MySQL、PostgreSQL和Hive),特别是如何在SpringBoot3框架下通过... 目录Java实现Kerberos认证主要方法依赖示例续期连接hive遇到的问题分析解决方式扩展思考总

SpringMVC前后端传值的几种实现方式

《SpringMVC前后端传值的几种实现方式》本文主要介绍了SpringMVC前后端传值的方式实现,包括使用HttpServletRequest、HttpSession、Model和ModelAndV... 目录一、从Controller层到JSP界面1、使用HttpServletRequest的方式2、使