over 3 years ago

1.首先必需先安裝 NodeJSnpm

2.建立 app 資料夾

3.於 terminal app 資料夾路徑下執行

npm init 

輸入 package.json 相關初步設定

4.init 初始化後開始安裝必須套件

安裝 react

npm install --save react@0.14.7
npm install --save react-dom@0.14.7

安裝 webpack

npm install --save-dev webpack@1.12.12
npm install webpack-dev-server@1.12.1 -g

安裝 babel

npm install --save-dev babel-loader@6.2.1
npm install --save-dev babel-core@6.4.5
npm install --save-dev babel-preset-es2015@6.3.13
npm install --save-dev babel-preset-react@6.3.13

安裝完畢後可觀看 package.json 內容

{
  "name": "myappinit",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "jasonwang",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^1.12.12"
  }
}

只要有這 package.json 內容下次重新安裝只要執行

npm install 

就可以安裝 package.json 內所設定的套件

5.app 資料夾路徑下建立 React components

hello.jsx

import React from 'react';
import ReactDOM from 'react-dom';
 
class Hello extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}
 
ReactDOM.render(<Hello/>, document.getElementById('hello'));

world.jsx

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

class World extends React.Component {
  render() {
    return <h1>World</h1>
  }
}

ReactDOM.render(<World/>, document.getElementById('world'));

6.建立 main.js

import Hello from './hello.jsx';
import World from './world.jsx';

7.建立 webpack.config.js 設定檔案輸出格式
entry : 為主要 js
output : 為編譯後輸出的路徑(path)及js檔案(filename)
loaders : 設定 loader 的規格
test : 轉譯的檔案格式表示式
loader : 設定 loader 種類可用 ['xx','xx']
exclude: 過濾的目錄
query: 設定配置的轉譯語法

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']
        }
      }
    ]
  },
};

7.建立 index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="hello"></div>
    <div id="world"></div>
    <script src="bundle.js"></script>
  </body>
</html>

8.於 terminal app 資料夾路徑下執行

webpack-dev-server --progress --colors

9.開啟 browsers 輸入 http://localhost:8080/webpack-dev-server/

可修改 package.json 內的 scripts
設定用 start 取代 webpack-dev-server --progress --colors

"scripts": {
  "build": "webpack",
  "start": "webpack-dev-server --devtool eval --progress --colors --hot"
}

直接執行

npm start

指令解釋
webpack-dev-server 會在 http://localhost:8080/webpack-dev-server/ 建立起專案的 server
devtool eval 會顯示出發生錯誤的行數與檔案名稱
progress 會顯示出打包的過程
colors 會幫 webpack 顯示的訊息加入顏色
webpack 執行編譯

參考來源
https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
http://rhadow.github.io/2015/04/02/webpack-workflow/

← ES6語法筆記 React Redux 環境建立及心得 →
 
comments powered by Disqus