前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Webpack+Babel+React开发环境搭建

Webpack+Babel+React开发环境搭建

作者头像
xiangzhihong
发布于 2018-02-05 13:12:27
发布于 2018-02-05 13:12:27
87600
代码可运行
举报
文章被收录于专栏:向治洪向治洪
运行总次数:0
代码可运行

前言

我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之前也讲过其他的前端框架,如 gulp+webpack,准确的说这不是一个框架,只是项目组织的形式而已。

Webpack+Babel+React环境搭建

安装Webpack

关于Webpack的介绍这里不讲解,大家可以看之前的讲解webpack介绍

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install webpack -g

创建一个项目

创建一个名叫learn-webpack项目,并进去项目目录。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
mkdir learn-webpack 
cd learn-webpack

接下来我们来创建2个文件:app.js和index.html,我们在也没上输出一个”Hello World”,

app.js:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.querySelector('#app').innerHTML = 'Hello World!';

index.html

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn-webpack</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

然后在终端执行如下命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
webpack ./app.js ./dist/bundle.js

最后执行启动本地的http服务,我们这里用python:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
python -m SimpleHTTPServer

然后我们访问:http://localhost:8000就可以看到效果了。

webpack文件配置

实际上每个项目下都应该包含一个webpack.config.js,用来告诉Webpack需要做些什么,这个我们之前文章也说过。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = {
  entry: "app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  }
}

接下来我们在终端运行命令,看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样呢,答案是肯定的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
webpack

注:

entry:指定打包的入口文件

  • 单个文件打包为单个输出文件,直接写该文件的名字,例如:entry:”main.js”
  • 多个文件打包为单个输出文件,将文件名放进一个数组,例如:entry:‘main.js’,’xx.js’
  • 多个文件打包为多个输出文件,将文件名放入一个键字对,例如:entry: {a:’main.js’,b:’xx.js’} output:配置打包结果 path为定义输出文件夹,filename为打包结果文件的名称,如果指定打包入口文件为上面的1、2种情况,filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成name.文件名.js,filename里面的name为entry中的键。

监听变化自动打包

当我们在不停的对代码进行变动的时候,为了不修改一次然后又手动去进行打包一次,可以使用webpack的watch功能。这也算是webpack的一个黑科技,以前做后端的时候必须重新部署,这个是很蛋疼的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
webpack --watch 或者 webpack -w

或者我们可以直接在配置代码里面把watch设置为true。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = {
  entry: "app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  },
  watch: true
}

Babel配置

Babel 是一个 JavaScript 编译器。使用它可以将ES6的语法转换为ES5的语法,以便在现在有的环境执行之前的代码。

首先安装basel。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

执行安装完成后需要将之前的webpack.config.js修改为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = {
  entry: "./app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['','.coffee','.js']
  }
}

现在就能在文件里面以ES6的语法进行代码编写,如在app.js加入:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var func = str => {
  console.log(str);
};
func('Hello Babel!');

我们再次运行,如果看到输出,就说明配置成功了。这里有关Loader的知识和配置就不讲究了,大家可以网上补补。

与React结合

终端输入以下代码对react和react-dom进行安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install react react-dom --save

安装Babel针对React的预设插件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install babel-preset-react --save-dev

由于我们增加了react的预设插件,所以需要对webpack.config.js进行修改。将module -> loaders下面的query修改如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
query: {
    presets: ['es2015','react']
}

接下来我们创建一个hello.js.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React from "react";

class Hello extends React.Component{
  render() {
    return (
      <div>
          Hello, World!
      </div>
    )
  }
}

export default Hello;

在app.js做一下配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

ReactDOM.render(
  <Hello />,
  document.querySelector('#app')
);

哈哈哈,这里如果大家做过React Native的,这里是不是感觉很亲切,只不过React Native还是用的npm在做管理。我们同样启动服务在看看,如果看到Hello World!就说明环境配置成功。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-01-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
简单的 H5 视频推流解决方案
作者:周超 导语 随着直播平台爆发式增长,直播平台从 PC 端转战移动端,紧跟着直播的潮流,自己学习实现了一套简单的 H5 视频推流的解决方案,下面就给小伙伴们分享一下自己学习过程中的经验。 环境部署 1、 配置、安装 Nginx; # ./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.pid --with-http_ssl_module --with-pcre=/usr/local/src/
腾讯云开发者社区
2018/01/15
10K5
简单的 H5 视频推流解决方案
NGINX如何实现rtmp推流服务--鉴权篇
最近直播大火,直播推流软件遍地开花,那么用NGINX如何进行推流呢?下面我们就简单的介绍一下用NGINX的rtmp模块如何实现视频推流,我们主要从一下几点介绍:
大话swift
2020/03/31
4.4K0
Nginx 搭建RTMP视频点播 直播 HLS服务器
安装Nginx --下载nginx-rtmp-module模块 git clone https://github.com/arut/nginx-rtmp-module.git --安装依赖 yum install -y wget gcc gcc-c++ make pcre pcre-deve zilib zlib-devel openssl-devel --下载Nginx源码包并解压 wget http://nginx.org/download/nginx-1.18.0.tar.gz tar zxvf
剧终
2020/12/15
5.4K0
Nginx 搭建RTMP视频点播 直播 HLS服务器
搭建直播系统并实现h5播放rtmp
推流只能用rtmp协议,拉流可以使用rtmp协议和hls协议。rtmp协议时adobe公司开发的开放协议,hls是苹果公司推出的直播协议。我们使用nginx的rtmp插件来搭建推流服务器
我的小熊不见了丶
2020/07/09
8.4K0
搭建直播系统并实现h5播放rtmp
【Android RTMP】RTMP 直播推流服务器搭建 ( Ubuntu 18.04.4 虚拟机 )
① 数据采集 : 使用 Camera 相机采集图像数据 , 使用 AudioRecord 采集声音 ;
韩曙亮
2023/03/27
9.9K0
【Android RTMP】RTMP 直播推流服务器搭建 ( Ubuntu 18.04.4 虚拟机 )
Nginx + RTMP + nginx-http-flv-module 环境搭建(CentOS 7)
实时消息传输协议(RTMP)是一种设计用于实时数据传输的协议,广泛用于流媒体服务。本文将介绍如何在CentOS 7上搭建一个基于Nginx的RTMP服务器,并使用nginx-http-flv-module模块实现HTTP-FLV流媒体服务。
IT_陈寒
2023/12/14
1.4K0
Nginx + RTMP + nginx-http-flv-module 环境搭建(CentOS 7)
Nginx添加rtmp模块搭建rtmp推流服务器
前言 搭建基于rtmp协议的推流服务器。 环境Centos 7 + Nginx 我这里默认nginx是用yum安装的 所以这篇文章最大可能和yum安装的nginx保持相同的配置 yum安装目录介绍 /usr/sbin/nginx 执行文件 /usr/lib64/nginx/modules/ 依赖模块目录 /etc/nginx 配置文件路径 /usr/share/nginx 默认的站点目录 安装Nginx和相关依赖 0、查看Nginx的版本和依赖 nginx -V 1、安装Nginx及其依赖库: #
码客说
2019/10/22
8.3K1
搭建nginx rtmp流媒体服务器(超详细)_nginx rtmp 集群
本微博在借鉴其他大牛之后,觉得应该写一个直播的完整流程,虽然简单,但是会有一个宏观感受:
全栈程序员站长
2022/09/27
5.7K0
搭建nginx rtmp流媒体服务器(超详细)_nginx rtmp 集群
OSSRS搭建rtmp推流服务器
文中测试视频:https://pan.baidu.com/s/1Cs9bULQ26zmDjbNqiIyUow 密码:q839
西里国际站
2023/04/18
4.2K0
ubuntu搭建推流服务器Nginx+rtmp
****前言**** 最近这两年直播平台及其流行,然而我呢? 也要玩玩推流服务器~~~ 实现服务器推流/PC客户端观看/浏览器客户端查看 ---- ****简介**** 对于Nginx的优点呢就不多说了,两句话: 1)并发量高 2)可负载均衡 重点谈谈rtmp吧! RTMP全称是Real Time Messaging Protocol(实时消息传输协议),rmtp是一种通讯协议。该协议基于TCP,是一个协议族,包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。RTMP是一种
AlicFeng
2018/06/08
4.3K0
利用Simple-RTMP-Server搭建RTMP和HLS直播服务(上)
1、推流地址:rtmp://192.168.43.118:1935/live/livestream
LiveVideoStack
2021/09/02
3.1K0
利用Simple-RTMP-Server搭建RTMP和HLS直播服务(上)
Nginx流媒体服务器搭建
下载地址:http://nginx.org/download/nginx-1.12.1.tar.gz
aruba
2020/12/21
7.5K0
Nginx流媒体服务器搭建
Ubuntu中使用Nginx+rtmp搭建流媒体直播服务.md
本篇文章是继上一篇文章《Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务》文章而写,在上一篇文章中我们搭建了一个点播服务器,在此基础上我们再搭建一个直播服务器,
汤青松
2019/12/04
1.9K0
nginx服务器添加rtmp模块支持视频推流
注:Nginx服务器默认安装完成,只添加nginx-rtmp-module模块和nginx-http-flv-module模块,如果没有安装nginx服务,请参考 nginx安装
请叫我师哥
2021/10/25
4.1K3
nginx服务器添加rtmp模块支持视频推流
教你如何搭建自己的直播服务器-简易
 在项目中有没有遇见过要对接直播接口的需求?我想大家都是有的。但是怎么说呢,对接第三方的缺点也很明显,除去那不可避免的一些事故。最大的缺点就是要钱!!!要钱!!!要钱!!!
全栈程序员站长
2022/09/07
3.3K0
教你如何搭建自己的直播服务器-简易
Nginx+FFmpeg打造自己的视频直播服务
现在很多项目都有视频实时播放的功能需求,例如监控,直播等,原始的摄像头采集的视频流协议一般都是 rtsp 协议,在旧版的浏览器中使用
ruochen
2021/11/24
6.2K0
Nginx学习之配置RTMP模块搭建推流服务
写在开始 小程序升级实时音视频录制及播放能力,开放 Wi-Fi、NFC(HCE) 等硬件连接功能。同时提供按需加载、自定义组件和更多访问层级等新特性,增强了第三方平台的能力,以满足日趋丰富的业务需求。 为更高效地连接用户与商家,小程序提供了实时音视频录制及播放组件。符合类目要求的小程序自助开通后,可自建或使用云服务,实现单向、双向甚至多向的音视频功能,如在线授课、远程咨询、视频客服,以及多人会议等。 2017-12-26微信小程序推送了这样一条消息,文档,代码也是简单的一笔带过,用户需要自建或使用云服务,实
小柒2012
2018/04/13
3.8K0
Nginx学习之配置RTMP模块搭建推流服务
openresy+nginx-rtmp-module搭建点播直播服务器
一般点播或者直播服务器都是使用nginx-rtmp-module作为服务器,然后使用ffmpeg或者obs来进行推流,客户端使用rtmp、http-flv、hls或者dash协议拉取转码后的数据,进行播放。
golangLeetcode
2024/04/10
6830
openresy+nginx-rtmp-module搭建点播直播服务器
OSSRS搭建rtmp推流服务器
文中测试视频:https://pan.baidu.com/s/1Cs9bULQ26zmDjbNqiIyUow 密码:q839
码客说
2019/10/22
7.9K0
FFmpeg推流到Nginx并使用播放器播放
如今直播很火,下面就简单分享下我是如何直播的。必备工具:FFmpeg,Nginx,还有一个播放器。之前在实例解析中分享过如何用FreeSWITCH来做直 播,这次分享下如何用FFmpeg配合Nginx做直播。
杜金房
2020/12/21
2K0
推荐阅读
相关推荐
简单的 H5 视频推流解决方案
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档