使用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. Hive 基础你需要掌握这些

    HDFS 中一个简单的 Join查询,是否需要撸一大串代码?我只会SQL语句 能不能入坑大数据?这里我们就来聊一聊 Hive. Hive 是什么? Hive 是一种数据仓库工具,不提供数据存储(数据还 ...

  2. idea 中如何生成类图

    前言:记录一下 idea 中如何生成类图,毕竟类图在开发或看源码时用得特别多. 推荐博客:https://blog.csdn.net/zhangle1hao/article/details/78804 ...

  3. git fork后提交pull request到原作者，别人的pull request我们要怎样merge融合

    首先要记住,pull request 不是随便提交的,这是建立在你对原作者的项目有fork,并对项目中的代码有修改,并提交到了你的GitHub上,才能进行下面的操作. 若不知怎样fork项目,请看我的 ...

  4. 记录在window平台安装python的第三库（py，whl）

    在下载python的第三库文件的时候,有些库文件有exe的发行版,但是有些第三库并没有找到针对于window的可执行文件安装包即exe文件,而只有源代码文件即py文件,和whl文件. 下面记录一下在w ...

  5. ifconfig命令无法找到，提示bash: ifconfig: command not found

    问题就是题目那样,具体解决方法截图如下: 分析问题 1.whereis ifconfig 看一下这个命令在哪个目录下 2.echo $PATH 看一下该目录是否在路经下,注意lunux下是完全区分大小 ...

  6. CentOS7.4+MongoBD3.6.4集群(Shard)部署以及大数据量入库

    前言 mongodb支持自动分片,集群自动的切分数据,做负载均衡.避免上面的分片管理难度.mongodb分片是将集合切合成小块,分散到若干片里面,每个片负责所有数据的一部分.这些块对应用程序来说是透明 ...

  7. Spring Boot—04文件上传

    package com.smartmap.sample.ch1.controller.view; import java.io.File; import java.io.IOException; im ...

  8. x86项目中读取注册表Register数据项的方法

    x86项目中使用Registry读取key/value的时候,会出现重定向的问题,解决方法如下: public static string GetMachineGuid() { string guid ...

  9. Base64编码和解码实现

    function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqr ...

  10. RadioGroup实现类似ios的分段选择(UISegmentedControl)控件

    在ios7中有一种扁平风格的控件叫做分段选择控件UISegmentedControl,控件分为一排,横放着几个被简单线条隔开的按钮,每次点击只能选择其中一个按钮,他类似于tabbar但是又稍微有点区别 ...