使用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.

在瀏覽器中打開index.html
chrome