使用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 ...
随机推荐
- 安装SQL SEVER 2017 express 轻量入门级软件 安装教程
1. 首先 打开网址 https://www.microsoft.com/zh-tw/sql-server/sql-server-downloads 点击下载 , 下载完成之后, 点开安装 ...
- 软件架构系列二：Clean架构
外圈的层次可以依赖内层,反之不可以:内圈核心的实体代表业务,不可以依赖其所处的技术环境. 这是著名软件大师Bob大叔提出的一种架构,也是当前各种语言开发架构.干净架构提出了一种单向依赖关系,从而在逻辑 ...
- python之迭代
1.何为迭代: 对于给定list或者tuple,通过for循环来遍历这个list或tuple,这种遍历我们称之为迭代(Iteration). 2.python中利用for...in语句来完成迭代语句: ...
- 1000! mod 10^250
1000! mod 10^250 =============== the answer is 2 ================ Hi I'm trying to solve the above ...
- 什么是Github？
初识Github GitHub 是程序员的必备技能 1.什么是Github? 确切的说 GitHub 是一家公司,位于旧金山,由 Chris Wanstrath, PJ Hyett 与 Tom Pre ...
- 润乾V5手机报表说明文档
1.手机报表实例页面简要说明 index.jsp 是报表资源列表页面: mbReport.jsp 是报表展现页面: mbParam.jsp是参数报表展现页面: echarts.jsp是带有echart ...
- OkHttp2.0有Bug，暂时不推荐在产品中使用
版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4078137.html 之前在博客里推荐使用OkHttp来替换 ...
- git clone过程中发生的错误
错误提示: 问题原因以及解决方式:http://blog.csdn.net/huihut/article/details/79404421
- gitlab 启用HTTPS
NGINX设置 启用HTTPS 警告 Nginx配置会告诉浏览器和客户端,只需在未来24个月通过安全连接与您的GitLab实例进行通信.通过启用HTTPS,您需要至少在24个月内为您的实例提供安全连接 ...
- LeetCode题解之Rotate Array
1.题目描述 2.代码 void rotate(vector<int>& nums, int k) { ) return ; && (k / nums.size() ...