使用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环境的更多相关文章

  1. [转载]Sublime Text 3 搭建 React.js 开发环境

    ［转载］Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...

  2. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  3. 搭建Vue.js环境，建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  4. 如何在 Windows 10 中搭建 Node.js 环境？

    [编者按]本文作者为 Szabolcs Kurdi,主要通过生动的实例介绍如何在 Windows 10 中搭建 Node.js 环境.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中 ...

  5. 腾讯云：搭建 Node.js 环境

    搭建 Node.js 环境 安装 Node.js 环境 任务时间:5min ~ 10min Node.js 是运行在服务端的 JavaScript, 是基于 Chrome JavaScript V8 ...

  6. Webpack笔记（二）——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  7. Sublime Text 3 搭建 React.js 开发环境

    sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScr ...

  8. 使用webpack搭建react开发环境

    安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...

  9. 使用webpack2.0 搭建react.js项目

    最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番 关于webpack2.0和1.x的区别概括起来就是tree shaki ...

随机推荐

  1. nginx 错误日志分析

    502 1.查看nginx错误日志 tailf /data/log/nginx/error.log // :: [error] #: * recv() failed (: Connection res ...

  2. 左连接sql

    <?php public function sumZong($id){ $sql =' SELECT * FROM vvt_league_user AS p Left join vvt_leag ...

  3. CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  4. CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

    一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .f ...

  5. Codeforces 981H：K Paths

    传送门 考虑枚举一条路径 \(u,v\),求出所有边经过它的答案 只需要求出 \(u\) 的子树内选出 \(k\) 个可以重复的点,使得它们到 \(u\) 的路径不相交 不难发现,就是从 \(u\) ...

  6. Mysql InnoDB的四个事务隔离级别和（分别逐级解决的问题）脏读，不可重复读，虚读

    MySqlInnoDB的事务隔离级别有四个:(默认是可重复读repeatable read) 未提交读 read uncommit : 在另一个事务修改了数据,但尚未提交,在本事务中SELECT语句可 ...

  7. git之回退

    1:本地已commit,未push到远程仓库          1)git log: 查看commit日志,获取commit的id 2)  git reset  --hard  commit_id: ...

  8. iPhone越狱cydia源大全

    越狱后如何添加cydia源及cydia源大全,希望对大家能有所帮助! 工具/原料 cydia 步骤/方法 越狱后添加cydia源 进入Cydia管理中找到软件源,先添加源. 进入“软件源”之后点击右上 ...

  9. 签署您的应用--手动签署 APK

    签署您的应用 本文内容 证书和密钥库 签署您的调试构建 调试证书的有效期 管理您的密钥 使用 Google Play 应用签名 自行管理您的密钥和密钥库 签署 APK 生成密钥和密钥库 手动签署 AP ...

  10. ubuntu安装zeromq

    官网地址:http://zeromq.org/ ubuntu下zmq安装 (1)下载:wget http://download.zeromq.org/zeromq-4.1.4.tar.gz (2)解压 ...