接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA，而內容會假設讀者已經熟悉 React, Redux 及 Webpack，會把重點放在如何實作，不會逐步講解基礎觀念。

1. 環境建置
   • 基本介紹(Intro/Install/Run)
   • 執行 React 專案前置作業
   • 打造可撰寫 JSX/ES6/ES7 的環境
   • Webpack 設定
2. 建立檔案架構與功能
   • 規劃 React + Redux 架構
   • 顯示待辦事項清單
   • 新增/修改/刪除待辦事項清單
3. 實作 PWA
   • 建立 Web App Manifest File
   • 新增 Service Worker

已完成範例如下：
https://github.com/AnnaSu/todolist-pwa-demo-react

而此篇文章為『環境建置』，內容如下：

基本介紹(Intro / Install / Run)

說明此範例的環境介紹(Intro)之外，也說明安裝方式(Install)以及如何執行(Run)如下：

• Intro

  • 透過 json-server 來新增 DEMO 用的 API，模擬實際專案會使用 REST API 的情境。例如：

    • 取得待辦事項清單（GET）
      • http://localhost:3000/todolist
    • 新增待辦事項（POST）
      • http://localhost:3000/todolist/${id}
    • 修改待辦事項（PUT）
      • http://localhost:3000/todolist/${id}
    • 刪除待辦事項（DELETE）
      • http://localhost:3000/todolist/${id}

  • 安裝 webpack-dev-server 來快速建置 server 環境，將網站跑起來。

  • 藉由 concurrently，能夠同時跑多個 commands，例如：concurrently --kill-others 'webpack-dev-server --port 8000' 'json-server --watch db.json'

延伸閱讀：環境建置 ( json-server、http-server 、concurrently )

• Install

git clone https://github.com/AnnaSu/todolist-pwa-demo-react.git
cd todolist-pwa-demo-react
npm install

• Run

npm start

可參考 package.json 內的 "start": "concurrently --kill-others 'webpack-dev-server --port 8000' 'json-server --watch db.json'"

執行 React 專案前置作業

為了建立 React 專案，首先安裝對應 module:

npm install --save-dev react react-dom react-redux react-router redux redux-thunk

• react
  • A declarative, efficient, and flexible JavaScript library for building user interfaces.
• react-dom
  • React package for working with the DOM.
• react-redux
  • Official React bindings for Redux
• react-router
  • Declarative routing for React
• redux
  • Predictable state container for JavaScript apps
• redux-thunk
  • Thunk middleware for Redux

打造可撰寫 JSX / ES6 / ES7 的環境

將 React 相關的 module 安裝完畢之後，由於 React 通常會使用 jsx，所以我們還需要安裝 babel-preset-react，如果我們程式碼會用到 ES7，那麼可以再安裝 babel-preset-stage-0

npm install --save-dev babel-preset-react babel-preset-stage-0

• babel-preset-react
  • Babel preset for all React plugins
• babel-preset-stage-0
  • Babel preset for stage 0 plugins.

Webpack 設定

接下來再安裝 webpack 的相關 module

npm install --save-dev file-loader url-loader webpack-dev-server

• file-loader
  • file loader for webpack
• url-loader
  • url loader module for webpack
• webpack-dev-server
  • Serves a webpack app. Updates the browser on changes.

完整 webpack.config.js 檔案如下：

var path = require('path');

module.exports = {
  context: __dirname,
  devtool: '#eval-source-map',

  entry: {
    main: path.resolve(__dirname, './src/boot.js'),
  },

  output: {
    path: path.resolve(__dirname, './assets'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },

  module: {
    loaders: [{
      test: /\.js(x)?$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      },
      exclude: /node_modules/
    }]
  }
}

本日小結

此篇文章針對『環境建置』做詳細的介紹，從安裝 module 開始，一步步說明如何建立 React + Redux + Webpack 的環境，而下一篇將會介紹『完成 To-Do List 專案架構與功能』。

本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝