前言:

构建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的安装

  1. npm install -g create-react-app # Windows
  2. sudo npm install -g create-react-app # Linux

  创建React项目

  1. create-react-app my-app
    cd my-app
    npm start

2)构建:generator-react-webpack

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

  

  1. mkdir new-react-demo
    cd new-react-demo
    yo react-webpack
    npm start

  

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

安装webpack

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

  1. mkdir react-webpack
  2. cd react-webpack
    npm init
    npm install --save-dev webpack

  配置webpack.config.js

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

  1. var path =require('path');
  2. module.exports = {
  3. //入口文件
  4. entry:'./app/index.js',
  5. //出口文件
  6. output:{
  7. filename:'index.js',
  8. path:path.resolve(__dirname,'dist')
  9. }
  10. }

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>React全家桶-jspang</title>
  8. </head>
  9. <body>
  10.  
  11. </body>
  12. <!--引入出口文件-->
  13. <script src="./dist/index.js"></script>
  14. </html>

  

测试webpack配置

通过上面的步骤,配置好了wbpack,现在可以测试一下我们webpack配置是否有问题。在路口文件中写入下面的代码,并进行打包测试。

/app/index.js文件

  1. function component(){
  2. var element = document.createElement('div');
  3. element.innerHTML = ('Hello JSPang');
  4. return element;
  5. }
  6.  
  7. document.body.appendChild(component());

  

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

加入打包命令

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

  1. "scripts": {
  2. "build": "webpack"
  3. },

  

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

开发服务器配置

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

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

  1. cnpm install --save-dev webpack-dev-server

  

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

  1. devServer:{
  2. contentBase:'./',
  3. host:'localhost',
  4. compress:true,
  5. port:1717
  6. }

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

  1. "scripts": {
  2. "build": "webpack",
  3. "server": "webpack-dev-server --open"
  4. },

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

自动刷新浏览器

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

  1. output:{
  2. filename:'index.js',
  3. path:path.resolve(__dirname,'dist'),
  4. publicPath:'temp/'
  5. },  

index.html文件引入JS

  1. <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. "devDependencies": {
  2. "babel-core": "^6.26.0",
  3. "babel-loader": "^7.1.2",
  4. "babel-preset-es2015": "^6.24.1",
  5. "babel-preset-react": "^6.24.1",
  6. "webpack": "^3.8.1",
  7. "webpack-dev-server": "^2.9.3"
  8. }

  

配置module

在安装完成后,可以到webpack.config.js里配置module,也就是配置我们常说的loader。

  1. module:{
  2. loaders:[
  3. {
  4. test:/\.js$/,
  5. exclude:/node_modules/,
  6. loaders:"babel-loader",
  7. query:{
  8. presets:['es2015','react']
  9. }
  10. }
  11. ]
  12. }

编写React

webpack通过上边的步骤,基本已经配置完成了,这里我们写一个React文件来进行测试一下。在进行编写React文件前,要记得安装React和React-dom这两个包。

安装React和React-dom

  1. cnpm install --save react react-dom

安装完成后,我们改写app/index.js文件,把原来原生的JavaScript代码改成React代码。

index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. ReactDOM.render(
  5. <div>Hello JSPang</div>,
  6. document.getElementById("app")
  7. );

因为上边我们加了一个app的选择器,所以在index.html中增加一个div标签,并把id设置成app。

index.html

  1. <div id="app"></div>

都配置完了,我们可以用之前配置好的npm run server 命令进行预览了。如果在浏览器中看到了Hello JSPang 这段文字,说明我们的配置成功了,以后就可以愉快的进行开发了。

总结:其实自己配置React开发环境在实际工作中也并不多,因为我们的配置毕竟不是很成熟,而且支持较少。这里学习只是为了你更好的掌握React构建过程和设置参数,实际工作中尽量使用合适的脚手架工具。

转载自:jspang.com/2017/10/22/react-all-01/


webpack.config.js的完整代码

  1. var path = require('path');
  2.  
  3. module.exports = {
  4. // 入口文件
  5. entry: './app/index.js',
  6.  
  7. // 服务器配置
  8. devServer: {
  9. contentBase: './',
  10. host: 'localhost',
  11. compress: true,
  12. port: 1717
  13. },
  14.  
  15. // 配置Babel
  16. module:{
  17. loaders:[
  18. {
  19. test:/\.js$/,
  20. exclude:/node_modules/,
  21. loaders:"babel-loader",
  22. query:{
  23. presets:['es2015','react']
  24. }
  25. }
  26. ]
  27. },
  28.  
  29. // 出口文件
  30. output: {
  31. filename: 'index.js',
  32. path: path.resolve(__dirname,'dist'),
  33. publicPath: 'temp/'
  34. }
  35. }

  

创建react项目的几种方法的更多相关文章

  1. 尚硅谷springboot学习6-eclipse创建springboot项目的三种方法(转)

    方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安装插件的进度,等插件安装完成后重启eclipse生效 新建spring boot项目 项目启动 方法二 1.创建Mave ...

  2. eclipse创建springboot项目的三种方法

    本文链接:https://blog.csdn.net/mousede/article/details/81285693 方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安 ...

  3. 创建springboot项目的三种方法(参考

    https://blog.csdn.net/mousede/article/details/81285693 https://blog.csdn.net/weixin_42194143/article ...

  4. 用Visual C++创建WPF项目的三种主要方法

    用Visual C++创建WPF项目的三种主要方法 The problem with using XAML from C++ Because C++ doesn't support partial c ...

  5. 简述--构建React项目的几种方式

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  6. React(一)使用脚手架创建React项目

    1.安装脚手架 现在使用较多的就是这三种脚手架工具: react-boilerplate react-redux-starter-kit create-react-app 我使用的是第三种,faceb ...

  7. 使用express创建node服务器的两种方法及区别

    使用express创建node服务器有两种方法,如下所示: 方法一: var express = require('express'); var app = express(); app.listen ...

  8. .net中创建xml文件的两种方法

    .net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...

  9. Tomcat 部署项目的三种方法

    1.下载 Tomcat 服务器 ①.官网下载地址:http://tomcat.apache.org/ ②.tomcat 8.0 64位百度云下载地址:http://pan.baidu.com/s/1s ...

随机推荐

  1. Servlet、Tomcat访问(access)日志配置、记录Post请求参数

    一.运行环境: Maven:3.5.2(点击下载) ,下载页 Tomcat:8.5.29(点击下载) ,下载页 JDK:jdk1.7.0_80(点击下载) ,下载页 MavenDependency: ...

  2. tiny png

    golang package main import ( "encoding/base64" "fmt" "os" "net/ht ...

  3. git log --pretty=format:" "

    控制显示的记录格式,常用的格式占位符写法及其代表的意义如下: 选项 说明%H   提交对象(commit)的完整哈希字串%h    提交对象的简短哈希字串%T    树对象(tree)的完整哈希字串% ...

  4. LeetCode - 503. Next Greater Element II

    Given a circular array (the next element of the last element is the first element of the array), pri ...

  5. mysql之表格的关联关系

    1.’基本模式有多对一,多对多,一对一.关联的两个基本组建为外键列和参照列 典型的多对一模式,很普遍,如部门表和员工表,即一个部门可以有多个员工. 对于多对多的模式,就需要建立中间表,将其转换为多对一 ...

  6. error_match问题

    当nginx的sendfile处于on的情况下,在docker的环境下修改js文件会出现error_match的问题,应该要在nginx的配置中把sendfile设为off

  7. Spring-boot(二)--thymeleaf

    @Controller @RequestMapping("/") public class MessageController { private final MessageRep ...

  8. laravel 5.4 导出excel表格

    1.在laravel根目录下面找到一个composer.json文件 打开并在require下面加上一句话,如图所示: 注:以后这个excel的版本号可能还会修改 2.执行 composer inst ...

  9. 浅谈Observer在代码中表现形式

    说到观察者模式,基本在软件工程领域中是应用广泛,不知道的可以先学习一番,下面给个快速的回顾,然后在通过一个grpc中的responseObserver谈下观察者对象在代码中的位置. 喜欢类图,就不上其 ...

  10. GetAsyncKeyState()& 0x8000

    0x8000 & GetKeyState(VK_SHIFT); 这句是判断是否有按下shift键. 关于GetAsyncKeyState与GetKeyState区别:关于GetAsyncKey ...