React無痛開發環境建置-使用webpack




前言

react的學習曲線真的是非常之高,痛苦阿...摸了好久,使用的東西非常之多,對新手來說光環境跟工具的設定就夠頭痛了,很難專注在code上面,所以之前都是直接引入CDN...但最近剛好有React的案子,再用CDN引入大概會被宰掉吧...畢竟練習跟開發是不一樣的

這邊提供我已經建置好的React 15開發環境

開始

先假設你已經有接觸過npm,並且對使用的工具有概念,如果還沒有趕快去補補~


安裝環境

$ npm init --yes

安裝webpack
$ npm install webpack --save -dev

安裝babel
$ npm install babel-core babel-loader --save -dev

babel對js es6及react支持
$ npm install babel-preset-es2015 babel-preset-react --save-dev

安裝react
$ npm install react react-dom --save

編寫配置文件

1. 建立 .babelrc ($touch .babelrc)

 .babelrc

{
    "presets":["es2015","react"]
}

2. 建立 webpack.config.js 在根目錄

webpack.config.js

var path = require('path');

var config = {
    entry: [path.resolve(__dirname, 'app/main.jsx')],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /.jsx?$/,
            loaders: ['babel-loader']
        }]
    }
};

module.exports = config;

最後設定

建立兩個資料夾 app 跟 build
其中 app 將會放置你的程式碼,build則會放置你編譯完後的檔案

1. 在app建立main.jsx

main.jsx

/* main.jsx */

'use strict';

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


ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('container')
);

2. 在build建立index.html
※ <script src="bundle.js"></script>必須放置在body底部,否則會造成過早載入找不到 <div id="container">標籤的問題

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="container"></div>
    <script src="bundle.js"></script>
</body>

</html>

編譯

執行 $ webpack
將程式碼編譯後打開index.html,完成!就這麼簡單

唯一要注意的是這邊設置的是最基本的環境所以每一次編寫完都需要執行一次 $ webpack 進行編譯,如有需要還可以加入其他一些工具自動編譯或是colde style~這邊就說明啦~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料