前言:

构建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
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项目的几种方式的更多相关文章

  1. Eclipse中构建maven项目的两种方式

    Eclipse中构建maven项目的两种方式 方式一: 1.构建maven项目 1.1 新建meven项目,可在Other中找到maven文件夹 1.2 进入maven项目后,点击next 1.3 在 ...

  2. 创建react项目的几种方法

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

  3. vue安装及创建项目的几种方式

    原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式 VUE安装的方式 直接用 script标签 引入 对于制作原型或学习,你可以这样使用最新版本: ...

  4. Eclipse导入SVN项目的三种方式

    Eclipse导入SVN项目的三种方式 一.直接Import导入: 1.点击 File --> Import,进入导入项目窗口 2.选择从SVN检出项目,点击Next 3.选择创建新的资源库位置 ...

  5. 在Tomcat中部署web项目的三种方式

    搬瓦工搭建SS教程 SSR免费节点:http://www.xiaokeli.me 在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Man ...

  6. tomcat发布web项目的三种方式

    tomcat发布web项目的三种方式 方式一: 配置tomcat 安装目录下的conf/server.xml <Host name="loaclhost">标签里面添加 ...

  7. Solon 开发,三、构建一个Bean的三种方式

    Solon 开发 一.注入或手动获取配置 二.注入或手动获取Bean 三.构建一个Bean的三种方式 四.Bean 扫描的三种方式 五.切面与环绕拦截 六.提取Bean的函数进行定制开发 七.自定义注 ...

  8. 技本功丨利用 Atomic 构建 React 项目工作流,so easy!

    近日刷微博,#2018年结婚率创新低#荣登热门话题NO.1,沪浙最不积极. 生活压力越大,缺爱的人也越来越多...据本萌的不完全观察,程序猿虽然是压力加成的职业,在袋鼠云还是有不少早早脱了单.至于,脱 ...

  9. 彻底了解构建 JSON 字符串的三种方式

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7701856.html 前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax ...

随机推荐

  1. 异步请求Python库 grequests的应用和与requests库的响应速度的比较

    requests库是python一个优秀的HTTP库,使用它可以非常简单地执行HTTP的各种操作,例如GET.POST等.不过,这个库所执行的网络请求都是同步了,即cpu发出请求指令后,IO执行发送和 ...

  2. EJB介绍

    EJB定义: 被称为java企业bean,服务器端组件,核心应用是部署分布式应用程序.用它部署的系统不限定平台.实际上EJB是一种产品,描述了应用组件要解决的标准. 标准: 可扩展 (Scalable ...

  3. js 关键字 in 判断 一个属性或方法是否属于一个对象

    判断对象是否为数组/对象的元素/属性: 格式:(变量 in 对象)......注意,,, 当“对象”为数组时,“变量”指的是数组的“索引”: 当“对象”为对象是,“变量”指的是对象的“属性”. 判断 ...

  4. 【python】用 sqlacodegen 将存在的数据库表 转化成model.py

    Flask的sqlalchemy对数据库表的模型提供了很多易用的方法.为了使用这些内容,需要将数据库表按照Flask识别的格式创建成Model,但是一般我们都是在已经创建好的数据库环境中开发Pytho ...

  5. Selector 模型

    1.服务器端: import selectors import socket sel = selectors.DefaultSelector() #生成一个select对象 def accept(so ...

  6. 【刷题】BZOJ 2744 [HEOI2012]朋友圈

    Description 在很久很久以前,曾经有两个国家和睦相处,无忧无虑的生活着.一年一度的评比大会开始了,作为和平的两国,一个朋友圈数量最多的永远都是最值得他人的尊敬,所以现在就是需要你求朋友圈的最 ...

  7. 【BZOJ1031】字符加密(后缀数组)

    [BZOJ1031]字符加密(后缀数组) 题面 BZOJ 洛谷 题解 把字符串倍长 然后直接求后缀数组, 拍好序之后直接输出就行了. (我只是复习一下\(SA\)而已) #include<ios ...

  8. POJ2074:Line of Sight——题解

    http://poj.org/problem?id=2074 题目大意:(下面的线段都与x轴平行)给两条线段,一个点在其中一条线段看另一条线段,但是中间有很多线段阻挡视线.求在线段上最大连续区间使得在 ...

  9. BZOJ5249:[九省联考2018]IIIDX——题解

    https://www.luogu.org/problemnew/show/P4364#sub https://www.lydsy.com/JudgeOnline/problem.php?id=524 ...

  10. lighttpd - 配置文件

    转载其他网站,收藏查看! 配置文件lighttpd.conf参数详细说明的链接和选译 发表于 2010年12月22日 http://redmine.lighttpd.net/projects/ligh ...