React.js - Webpack and Babel (ES6)

react.js webpack 新手教學,使用 ES6 完整介紹。

 

 

最近在編寫 react.js 時候,由於使用ES6,故引用 babel 來進行 compiler。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script type="text/babel"></script>

 

然而這有個很大的缺點,就是為了compiler,會讓整個DOM render效率降低,

因此 webpack 就是這麼來著,webpack 為基於 node.js 環境底下執行,透過 npm 即可安裝,

專門將你寫好的 react.js 打包為一支檔案,真的快很多~

以下為安裝設定過程,本篇使用 ES6 作為範例。

 

 

初始化專案

過程為本專案的基本資訊,預設 Enter 到底即可,

完成後則會建立 package.json。

npm init

 

安裝 React.js

安裝 react、react.dom 兩個模組。

npm install react 
npm install react-dom

 

安裝 Webpack

安裝 webpack、webpack-dev-server,

webpack-dev-server 為 debug 模式下所用的模組。

npm install webpack 
npm install webpack-dev-server

 

錯誤ERR!

安裝時,若出現此畫面,更改 package.json 裡面的 name(專案名稱)即可。

 

安裝 Babel

安裝babel-loader、babel-core、babel-preset-es2015、babel-preset-react。

npm install babel-loader 
npm install babel-core 
npm install babel-preset-es2015 
npm install babel-preset-react

 

編寫 React component

建立 apple.jsx,記得存為 jsx 檔案,若發現 syntax 顏色有點怪怪的,

在 sublime 中可安裝 HTML/CSS/JS Prettify。

可參考文章:Sublime【Package Control】 - HTML/CSS/JS Prettify - JSX

import React from 'react';
import ReactDOM from 'react-dom';

class Apple extends React.Component{
	render(){
		return <h1>This is an apple.</h1>;
	}
}

ReactDOM.render(<Apple />,document.getElementById('fruit'));

 

建立一個 main.js,此檔案專門將所有 component 集合起來。

import Apple from './apple.jsx';

 

建立主文件 index.html。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
</head>
<body>
	<div id="fruit"></div>
</body>
</html>

 

接下來為重點,建立 webpack.config.js,此為設定 webpack  檔案打包來源及輸出等等。

  • enrty:為專門 Import 所有 jsx 之檔案,即 component
  • output:為指定輸出檔案,經過 webpack 打包後,將會產出 bundle.js
  • module:query本篇使用 ES6(ECMAScript6)
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

 

修改 index.html,產出的 bundle.js 為我們要引用的檔案,故加入此檔案。

<script src="bundle.js"></script>

 

完成後我們開始打包吧~

webpack-dev-server 進行 debug 模式編譯,且處於 listening 監聽狀態。

正常為顯示:webpack:bundle is now VALID

webpack-dev-server --progress --colors

 

現在打開網址即可查看預覽結果:http://localhost:8080/webpack-dev-server/

 

進行檔案修改時,亦會監聽檔案進行打包。

 

停止  webpack-dev-server ,網頁上則會警示目前 lost connection。

 

debug 無誤後,我們可以安心正式產出 bundle.js 檔案。

webpack

 

打開 index.html 即可看到畫面~

 

想到要打一長串才可進行 webpack 監聽就會頭疼,如何加速或客製指令處理?

在 package.json 中,在 script 加入自訂指令以及實際運作指令即可:

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "author": "",
  "license": "ISC"
}

 

要使用的時候直接輸入:

npm run build
npm run dev

 

以下為完整目錄結構:

- node_modules 
- index.html
- bundle.js
- main.js
- webpack.config.js
- package.json
- apple.jsx

 

Multiple Component 

相信大家在刻 component 時候,不可能只有一個,

要如何將多數檔案進行 webpack 打包是面臨的問題,以及如何產出於特定目錄。

以下為假設有兩個元件 c_apple.js、c_orange.js 要分別進行打包,

在 webpack.config.js 中,我們修改來源:

  • bundleApple、bundleOrage :即為產出的 bundle 檔名
  • path.resolve(_dirname,'app/c_apple.js'):為指定 app 目錄中的 c_apple.js 檔案
 entry: {
        bundleApple: [path.resolve(__dirname, 'app/c_apple.js')],
        bundleOrange: [path.resolve(__dirname, 'app/c_orange.js')]
    }

 

在 output 部分則為:

  • path.resolve(_dirname),'build'):產出目錄指定於 build
  • '[name].js':依據 entry 中的名稱命名(bundleApple.js、bundleOrage.js)
 output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }

 

調整後目錄結構為:

  • 新建 app 資料夾,存放所有 component
  • 新建 build 資料夾,將 webpack 打包後的檔案放置於此
  • 記得調整 index.html 引用 bundle 的 src 
- node_modules 
- app   - apple.jsx
        - orange.jsx
        - c_apple.js
        - c_orange.js

- build - bundleApple.js
        - bundleOrange.js

- index.html

- webpack.config.js
- package.json

 

後記

簡單來說,寫 react.js 真心建議使用 webpack,效率!

 

有勘誤之處,不吝指教。ob'_'ov