使用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. VS2015编译OpenSSL

    概述 OpenSSL 是一个开源的第三方库,它实现了 SSL(Secure SocketLayer)和 TLS(Transport Layer Security)协议,被广泛企业应用所采用.对于一般的 ...

  2. Unity之使用技巧记录

    A:写了个死循环Unity无响应崩溃了怎么办? Q::到文件夹里找到刚刚写的脚本,把错误的代码屏蔽掉,再回到Unity

  3. 连接数据库 JDBC、DBCP、JNDI

    一.JDBC package com.direct.util; import java.sql.Connection; import java.sql.DriverManager; import ja ...

  4. canvas框架：：createjs入门

    createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件.地址:http://www.createjs.com/ 开发createjs的动画或游戏, ...

  5. js移动终端浏览器版本

    //当要在不同移动终端浏览器中运行不同的代码时,需要对各个终端浏览器进行判断 //判断浏览器 var browser = { versions: function () { var u = navig ...

  6. vscode 代码跳转之PHP篇

    1.安装插件:PHP IntelliSense 2.配置:"php.executablePath": "C:\\php\\php.exe", 但是目前有问题,跨 ...

  7. web百度地图离线开发

    公司现在做的一个项目本来用的是google离线地图,但是发现谷歌的地图数据很久没更新数据了,中国的城市发展这么快,好多地方地图和现实都对不上了. 发现百度地图数据更新挺快的(呵呵,毕竟是国产的吗),最 ...

  8. Vue 框架-03-键盘事件、健值修饰符、双向数据绑定

    Vue 框架-03-键盘时间及健值修饰符 一.键盘事件,当按键盘时,在控制台输出提示 html 源码: <!DOCTYPE html> <html> <head> ...

  9. Android Viewpager+Fragment实现滑动标签页

    ViewPager 结合Fragment实现一个Activity里包含多个可滑动的标签页,每个标签页可以有独立的布局及响应. 主页布局 <?xml version="1.0" ...

  10. sql 日期类型可以使用大于、小于号直接进行比较运算

    select * from emp where hiredate > '1982-1-1';  -- mysqlselect * from emp where hiredate > to_ ...