使用Yarn+Webpack+Babel6搭建React.js环境

时间 2019-11-09

标签使用 yarn+webpack+babel6 yarn webpack babel 搭建 react.js react 环境栏目 Hadoop 繁體版

原文原文链接

使用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的一个记录。javascript

开始

这里会使用Yarn,一个Facebook开源的Js包管理器，借鉴和改进了npm，而且和npm是兼容的。这里很是乐意推荐你们去尝试和使用Yarn。
新建一个新的Projecthtml

mkdir helloworld
cd helloworld
yarn init

使用默认的配置前端

安装和配置webpack

Webpack是当下最为火热的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。经过 loader 的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
使用Yarn安装webpackjava

yarn add webpack

新建一个webpack的配置文件：webpack.config.jsreact

touch webpack.config.js

并使用一下内容更新webpack.config.jswebpack

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

打包过程显示日志：web

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.

使用Yarn+Webpack+Babel6搭建React.js环境

使用Yarn+Webpack+Babel6搭建React.js环境

开始

安装和配置webpack

新建一个index.js文件

新建一个index.html文件

编译index.js并打包到bundle.js

添加loader

使用hot loader热替换

添加Chrome React.js调试插件