使用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 ...
随机推荐
- 解决：jsp 页面不全，response 内容不完整
前言:今天 jsp 页面输出不完整这个问题困扰了我几个小时,终于发现问题并解决了. 环境: tomcat 8.0.17 x64 jsp springmvc vue 问题: 本来页面正常,但加了几行代码 ...
- python学习之老男孩python全栈第九期_day029知识点总结——configparser模快、logging模块
一. configparser模块 生成文档 import configparser config = configparser.ConfigParser() config[', 'Compressi ...
- ASP.NET MVC 简单事务添加
ASP.NET MVC 简单事务 //实例化查询上下文 using ( BookStoreEntities db = new BookStoreEntities()) { //找到需要价格和名称的数据 ...
- 简洁php的MVC框架
一.文件结构 建立3个文件夹 controller文件夹存放控制器文件 view文件夹存放视图文件 model文件夹存放数据文件 建立1个index.php 作为唯一入口 二.控制器 我们在contr ...
- UVAlive6807 Túnel de Rata (最小生成树)
题意 题目链接 Sol 神仙题Orz 我们考虑选的边的补集,可以很惊奇的发现,这个补集中的边恰好是原图中的一颗生成树: 并且答案就是所有边权的和减去这个边集中的边的权值: 于是我们只需要求最大生成树就 ...
- WDCP上传SSL证书
1.在线申请SSL证书 2.网站管理>SSL证书上传 3.将key文件直接上传,cert文件内容复制到crt文件中,再上传 4.开启https 注意:同一个域名下解析的若干域名,只能走主域名的证 ...
- angular2 如何使用websocket
1.npm下载: npm install angular2-websocket 2.需要在哪个组件使用就在那里引入: import {$WebSocket} from 'angular2-websoc ...
- CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
- 网络I/O模型--03非阻塞模式（ServerSocket与Socket的超时处理）--解除accept()、 read()方法阻塞
对于阻塞方式的一种改进是在应用程序层面上将 “一直等待 ”的状态主动打开: 这种模式下,应用程序的线程不再一直等待操作系统的 I/O状态,而是在等待一段时间后就解除阻塞.如果没有得到想要的结果,则再次 ...
- 网络基础 Windows下安装和配置net-snmp 代理
Windows 下安装和配置net-snmp 代理[摘录] by:授客 QQ:1033553122 A. 安装 1. 安装前准备 ActivePerl-5.10.0.1004-MSWin ...