使用webpack和babel搭建react開發環境

http://www.tuicool.com/articles/MrUfUjQ

寫在前面,使用webpack已經蠻長一段時間,但是在新項目開始之際,都是東拼西湊其他項目的配置來使用,如果要自己從零開始寫一個完整項目的webpack配置估計得費死勁,所以在webpack發佈2.x版本之際,正是時候來認真 從零開始學習webpack 了

React 是一個出自facebook的js庫,用於構建用戶交互界面.是一個非常厲害的有很多優勢的庫,但是卻有着非常陡峭的學習曲線.當我開始嘗試它,最令我困擾的是,大部分的教程都略過了React開發環境的搭建.

譯者注: 如果只針對react,你大可以不使用webpack,可以嘗試 create-react-app ,它幫你處理了大部分問題,本文主要使用webpack.

所以讓我們開始吧,這篇文章非常適合那些害怕沾手react開發環境所需的繁瑣的配置而常常採取東湊西拼方式的新手.我的第一個目標就是保持這篇文章簡潔易懂.我不會使用任何模板文件,並且你能在github repo上找到完整的設置.我們會使用以下技術:

Webpack - 模塊打包器
Babel - JavaScript編譯器
ES6 - 相對較新的javascript的標準
Yarn - 包管理器
React

在這邊文章結束之前,我們將設置好一個React的開發環境以及一個簡單的打印hello world的頁面.

去擁抱樂趣吧!!

前置準備

在開始項目之前我們需要先安裝Yarn和Node到我們的機器上.

就如上面提到的,我們將使用Yarn做爲包管理器.它其實和npm相當相似,而且也提供和npm幾乎一樣的命令行工具.在此之上還有一些npm所不具備的額外的特性.或許你會感到不解,我列舉了幾個使用Yarn的主要原因 :

如果你之前已經安裝了某個package,你能在沒有網絡請求的情況下再次安裝.意味着你能離線安裝package,並且大大減少你安裝依賴所需的時間.
任何機器安裝時都會有相同的依賴關係,意味着一個機器的運行的安裝過程也會以同樣的方式運行在其他機器上.

如果要了解更多的話,可以去看看Yarn的文檔.

Mac Os的用戶可以放心使用下面的命令安裝Yarn,以爲我已經爲你們先行嘗試過了,使用其他操作系統的可以去查看Yarn的安裝說明,以便正確地安裝Yarn.

> brew update
> brew install yarn

開始入門

打開你的終端創建一個新文件夾.你可以隨意命名這個文件夾.進入文件夾後通過 yarn init 命令初始化項目, yarn init 就像 npm init 一樣,會給你提示,只要不停按回車或按你的意願配置就可以了.

> mkdir hello-world-react
> cd hello-world-react
> yarn init

當 yarn init 命令完成後你能看到你的文件夾(此例中爲’hello-world-react’)多了一個新的文件 package.json ,就像 npm init 的執行結果一樣.

安裝及配置Webpack

下面我們需要安裝webpack和一些依賴.

> yarn add webpack webpack-dev-server path

可以發現在當前文件夾下創建了一個新文件 yarn.lock .Yarn用這個文件來鎖定準確的依賴關係,以保證在其他機器上也能以相同的方式運行.我們不用放心思在這個文件中因爲它是自動生成的.

現在我們已經安裝了webpack了,我們需要一個配置文件來告訴webpack應該要做什麼.在項目文件夾中創建一個新文件 webpack.config.js ,然後用你喜歡的編輯器打開它.

> touch webpack.config.js

然後更改配置文件:

/*
    ./webpack.config.js
*/
const path = require(‘path’);
module.exports = {
  entry: ‘./client/index.js’,
  output: {
    path: path.resolve(‘dist’),
    filename: ‘index_bundle.js’
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: ‘babel-loader’, exclude: /node_modules/ },
      { test: /\.jsx$/, loader: ‘babel-loader’, exclude: /node_modules/ }
    ]
  }
}

基本上,使用webpack我們需要制定一個 entry 入口和 output 輸出.

entry : 指定入口文件,即打包器開始構建流程的地方.
output : 指定打包後的文件應該存放的位置.

無論如何,我們同時還需要 loaders .通過它們我們能讓瀏覽器能夠理解並且運行jsx以及用ES6標準書寫的代碼.

loaders : 會把我們應用上需要用到的文件進行轉化.

配置中的loaders接受一個loader的數組.我們需要指定 babel-loader 把除去 node_module 文件夾以外的所有 .js 及 .jsx 文件進行轉化.如果需要的話你總是能添加更多的 loader .舉個例子,如果你項目有單獨的樣式文件(如css)需要處理,那你會需要用到CSS loader.所有的這些loaders能在webpack的文檔中找到.大方隨意去做各種嘗試吧.

Babel設置

我們在webpack配置中指明瞭使用 babel-loader .但這個 babel-loader 又是從哪來呢?接下來我們就要把它下載並進行一些設置.

> yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

我們安裝了我們所需要的所有依賴.注意我們添加了 babel-preset-es2015 和 babel-preset-react ,presets是babel的插件,它會告訴babel需要把哪些部分轉化成原生的javascript.

然後我們需要去設置babel,設置babel可以通過添加一個 .babelrc 文件來完成.

> touch .babelrc

然後做以下改動

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}

就這樣.當webpack調用 babel-loader 時它會知道該對文件做什麼處理了.

設置我們的react組件

到目前爲止,我們的目錄結構是這樣的

.
|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

你不覺得是時候開始添加React的支持了嗎?我們創建一個新文件夾 client ,之後再往這文件夾裏面添加 index.js 和 index.html .

> mkdir client
> cd client
> touch index.js
> touch index.html
> cd ..

現在目錄結構是這樣的

.
|-- client
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

接下來讓我們寫點代碼吧.我們用一些簡單的語句來驗證下我們的配置是否能正確運行吧.

編輯 index.js

/*
    ./client/index.js
    which is the webpack entry file
*/
console.log('Hey guys and ladies!!')

編輯 index.html

<!--
    ./client/index.html
    basic html skeleton
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App Setup</title>
  </head>
  <body>
    <div id="root">

    </div>
  </body>
</html>

index.html 會用來在瀏覽器加載並展示我們的React組件.我前面提到過我們需要 babel 來編譯我們的代碼以便瀏覽器運行.我們將用 ES6 以及 JSX 語法來編寫React組件的代碼.因爲這個兩個語法都沒有得到瀏覽器很好的支持,所以我們需要用 babel-loader 來幫助我們處理,而後再進行打包輸出的結果纔是我們最終在 index.html 加載的代碼.

要把打包完成的代碼添加到我們的html文件,其中一個方法是手動插入一個 script 標籤並指定打包後的文件的位置到src屬性.一個更加好的做法是通過一個叫 html-webpack-plugin 的插件幫助我們自動完成上面的工作.這個插件提供了一個簡單的方式來根據我們的html文件模板生成我們最終需要的html文件.我們只需要關心html文件模板即可,然後通過一些簡單配置它就能幫我們完成script的插入.讓我們開始動手吧.

Html-Webpack-Plugin

首先我們需要安裝這個插件.在項目的根目錄下運行終端.然後執行以下命令

> yarn add html-webpack-plugin

然後編輯 webpack.config.js 添加一些配置.

/* 
    ./webpack.config.js
*/
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {

...

module: {
    loaders: [
        ...
    ]
},
// add this line
plugins: [HtmlWebpackPluginConfig]
}

其實配置本身已經非常清晰了.我們導入了 html-webpack-plugin 插件,並且創建了一個該插件的實例,再指定 template 爲我們的html模板. filename 即是最終通過這個插件生成的html文件的文件名. inject: body 告訴插件把js標籤添加到body的結束標籤之前.

運行!

我們快要完成了.讓我們嘗試去運行我們的配置.在此之前先做點微小的工作.打開 package.json並添加一個start script.

/*
    ./package.json
*/
{
  "name": "hello-world-react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",

  // add the scripts key to your package.json

  "scripts": {
    "start": "webpack-dev-server"
  },

  "dependencies": {
  ...
  },
  "devDependencies": {
  ...
  }
}

然後我們能在終端上執行以下命令

> yarn start

然後打開瀏覽器並訪問 http://localhost:8080/ ,打開控制檯你應該可以可以看出輸出 "Hey guys and ladies!!" .使用localhost:8080是因爲 webpack-dev-server 啓動了一個開發服務器.注意webpack-dev-server 會在我們執行 yarn start 時運行.

成功運行了!讓我們來添加一些簡單React組件看看會發生什麼.

React, React, React(重說三)

我會創建一個非常簡單的 Hello World 的React組件.我們需要安裝React的依賴.

> yarn add react react-dom

接下來在 client 文件夾中添加一個 components 文件夾.並創建一個 App.jsx .

> cd client
> mkdir components 
> cd components
> touch App.jsx
> cd ../..

現在我們的目錄結構是這樣子的

.
|-- client
     |-- components
         |-- App.jsx
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

React的組件命名約定俗成地使用 首字母大寫的駝峯式 命名規則.所以我們文件的名字也是有個大寫字母開頭.後綴既可以是 jsx 也可以是 js .我覺得當要使用 jsx 語法時最好還是明確的使用jsx 作爲後綴.

接下來編輯 App.jsx 文件

/*
    ./client/components/App.jsx
*/
import React from 'react';

export default class App extends React.Component {
  render() {
    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World</h1>
      </div>);
  }
}

最後爲了把我們的組件渲染到我們的頁面上.把 index.js 的 console.log 替換成以下的代碼

/* 
    ./client/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

打開終端再次運行我們的項目,確認終端當前目錄爲項目的根目錄.

> yarn start

這就對了!非常高興你完成我們一開始的目標!!

總結

現在我們已經搭好React的開發環境了.我希望這篇教程能讓你明白這些配置是怎麼一回事以及爲什麼我們需要這些配置.同時,如果每個項目都需要那麼多配置的話,你可以fork我的 repo 並以此爲基礎來改動.

請大膽嘗試不同的webpack配置,如果發現了非常cool的東西也歡迎在評論低下留言.( 譯者注: 原文地址 https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel#conclusion )

最後,在這個教程之後你能夠並且應該嘗試去完成一個深度的React的項目.Wow~

XU丶WEI

發佈了1 篇原創文章 · 獲贊 6 · 訪問量 13萬+

私信關注

使用webpack和babel搭建react開發環境

前置準備

開始入門

安裝及配置Webpack

Babel設置

設置我們的react組件

Html-Webpack-Plugin

運行!

React, React, React(重說三)

總結

Vue-book 2.0 一個移動端簡單的全棧 web APP

Vue2.0全家桶仿騰訊體育APP

Vue豆瓣系列文章

用 webpack 實現持久化緩存

git入門級--在github創建項目

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結