使用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. vue中watch数组或者对象

    1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console. ...

  2. Java多线程学习之线程的取消与中断机制

    任务和线程的启动很容易.在大多数情况下我们都会让他们运行直到结束,或是让他们自行停止.但是,有时我们希望提前结束任务或是线程,可能是因为用户请求取消,或是线程在规定时间内没有结束,或是出现了一些问题迫 ...

  3. java写卷积神经网络---CupCnn简介

    https://blog.csdn.net/u011913612/article/details/79253450

  4. C Traps：运算

    位移 如果sizeof(int) = 4,那么下面的代码的结果是什么? int x=255; printf("%d", x>>34); 实际输出:63 在编译这个代码时 ...

  5. Vue如何使用动态刷新Echarts组件

    这次给大家带来Vue如何使用动态刷新Echarts组件,Vue使用动态刷新Echarts组件的注意事项有哪些,下面就是实战案例,一起来看一下. 需求背景:dashboard作为目前企业中后台产品的“门 ...

  6. curl 封装类

    <?php /** * author: zbseoag * QQ: 617937424 用法: $content = Curl::instance()->url($url)->get ...

  7. Spring Boot—16日志设置

    application.properties # server.address=0.0.0.0 server.port=8080 server.servlet.context-path=/test s ...

  8. sql中 设置区分大小写

    CI 指定不区分大小写,CS 指定区分大小写alter table 表名 alter column 字段 nvarchar(100) collate chinese_prc_cs_as --区分大小写 ...

  9. 数字时钟（DigitalClock）

    数字时钟(DigitalClock) 这个其实就是我们平时看到的手机上面显示的时间 很简单 1.Activity //数字时钟 public class DigitalClockActivity ex ...

  10. Flutter完整开发实战详解

    Flutter完整开发实战详解(一.Dart语言和Flutter基础) Flutter完整开发实战详解(二. 快速开发实战篇) Flutter完整开发实战详解(三. 打包与填坑篇)