3秒鐘快速搭建一個react多頁應用

what

本文主要闡述瞭如何使用dawn快速搭建一個多頁面應用。

why

單頁有許多優缺點。而我司當前的狀況比較適合於使用多頁面應用，既提升了開發效率，保證了用戶體驗，又極大的兼容了原有的PHP體系。

how

1. 第一秒，準備原材料

   $ npm install dawn -g
   $ mkdir demo

2. 第二秒，初始化應用

   // react
   $ dn init -t react

3. 第三秒，多頁配置
   在./src中，複製並修改index.js爲所需的頁面名稱。固然也能夠不復制不修改，此時就是一個單頁面應用。dawn會自動讀取./src中的js做爲入口（不包括子目錄中的js）

至此，多頁面應用已經構建完成

extra

在此基礎上，我又進行了一些額外配置

• 狀態管理方案參考了這篇 利用Dawn工程化工具實踐MobX數據流管理方案，或者能夠說由於這篇文章對於Mobx的優秀實踐，我發現了dawn這個工具

• 對webpack進行高度配置，在./下新建webpack.config.js。舉個例子：

  module.exports = function(configs,webpack,ctx){
    //configs 爲默認配置，能夠在這裏對其進行修改
    //webpack 當前 webpack 實例
    //ctx 當前構建「上下文實例」
    configs.plugins.push(new webpack.DefinePlugin({
      "process.env": { 
         NODE_ENV: JSON.stringify("production") 
       }
    }));
  };

• 將入口文件移入新建./src下的pages文件夾，同時在./.dawn/pipe.yml中修改dev和build下的webpack項

  entry: ./src/pages/*.js

• 修改./src/assets/*.html增長業務所需內容