使用Yarn+Webpack+Babel6搭建React.js环境
使用Yarn+Webpack+Babel6搭建React.js环境
Facebook开源的React.js已经改变了世人对前端UI的思考方式。这种基于组件方式的优势之一，就是使View更加的简单，因为React.js的View就是一个关于props和state的js function。同时，React.js是前端的模块化开发，更加简单和快捷，这也是极大诱惑。
React.js的学习曲线，相对于其他的前端框架，还是先对平缓的，特别对于来自桌面的开发者。但围绕React.js的工具（Babel、Webpack、Yarn）和库还是有不少挑战。
事实上，这些工具对于React.js开发来说不是必须的，但为了最大程度利用ES6和JSX的特性，他们还是十分有必要的。因此，这里会使用这些工具一步一步的搭建React的开发环境。
这些仅仅是我学习React.js的一个记录。
开始
这里会使用Yarn,一个Facebook开源的Js包管理器，借鉴和改进了npm，并且和npm是兼容的。这里非常乐意推荐大家去尝试和使用Yarn。
新建一个新的Project
mkdir helloworld
cd helloworld
yarn init
使用默认的配置
安装和配置webpack
Webpack是当下最为火热的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
使用Yarn安装webpack
yarn add webpack
新建一个webpack的配置文件：webpack.config.js
touch webpack.config.js
并使用一下内容更新webpack.config.js
var webpack = require('webpack')
//import webpack from 'webpack'
module.exports = {
devtool: 'eval',
entry: [
'./index.js'
],
output: {
path: __dirname,
filename: 'bundle.js'
}
}
新建一个index.js文件
document.write("Hello world react")
新建一个index.html文件
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>
编译index.js并打包到bundle.js
$ yarn run webpack index.js bundle.js
打包过程显示日志：
Hash: 8b231dfafb36fcecaafd
Version: webpack 2.13.3
Time: 86ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./index.js 28 bytes {0} [built]
Done in 0.67s.
在浏览器中打开index.html
添加loader
使用hot loader热替换
添加Chrome React.js调试插件
未完待续
使用Yarn+Webpack+Babel6搭建React.js环境的更多相关文章
- [转载]Sublime Text 3 搭建 React.js 开发环境
［转载］Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...
- 基于 Webpack 4 搭建 Vue 开发环境
自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...
- 搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- 如何在 Windows 10 中搭建 Node.js 环境？
[编者按]本文作者为 Szabolcs Kurdi,主要通过生动的实例介绍如何在 Windows 10 中搭建 Node.js 环境.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中 ...
- 腾讯云：搭建 Node.js 环境
搭建 Node.js 环境 安装 Node.js 环境 任务时间:5min ~ 10min Node.js 是运行在服务端的 JavaScript, 是基于 Chrome JavaScript V8 ...
- Webpack笔记（二）——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- Sublime Text 3 搭建 React.js 开发环境
sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScr ...
- 使用webpack搭建react开发环境
安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...
- 使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番 关于webpack2.0和1.x的区别概括起来就是tree shaki ...
随机推荐
- MyBatis --- 配置步骤
本文并非具体的细节,而是主要的配置步骤 概述 MyBatis 是半自动的ORM 框架,在MyBatis 整合 Spring Boot 的时候步骤比较繁琐,所以写下此篇纪录一下步骤. 使用 MyBati ...
- MVC登陆认证简单设置
首先,弄个基类 /// <summary> /// 所有控制器基类,里面重写了OnActionExecuted方法 /// </summary> public class Ba ...
- 532 -数组中的K-diff对
例1: 输入: [3,1,4,1,5],k = 2 输出: 2 说明:阵列中有两个2-diff对,(1,3)和(3,5). 虽然我们在输入中有两个1,但我们应该只返回唯一对的数量. 例2: 输入: ...
- mysql行转列，列转行
行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通过CASE WHEN 语句来实现,也可以通过 SQL SERVER 2005 新增的运算符PIVOT来实现.用传统的方法,比较好理解.层次清 ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取博客所有的文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的h ...
- 浅谈脚本化css（一）
读写css属性 每一个dom元素都有一个属性style,dom.style里面存放的这个元素的行间样式,我们可以通过这个属性来读写元素的行间样式. 注意: 1.我们碰到float这样的关键字属性的时候 ...
- package.json参数简单介绍
概述: 每个项目的根目录下都会有一个package.json文件,定义了项目所需的模块,以及项目信息.执行npm install 命令会自动下载package.json中配置的模块,也就是配置项目的运 ...
- 【代码笔记】iOS-iphone开发之获取系统字体
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. NS ...
- [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...
- mysql_real_escape_string与mysqli_real_escape_string
参考 mysql_real_escape_string mysqli_real_escape_string mysql_real_escape_string是用来转义字符的,主要是转义POST或GE ...