告別webpack react 搭建多頁面之痛

webpack4 搭建 react 多頁面應用

在往下看以前請確保nodejs > 8.X

先上個涼的吃着

目錄結構

.
├── dist                   # 編譯結果
├── build                  # 配置文件
├── cli                    # sh腳本存放處
├── src                    # 
    ├── assets             # Store images, icons, ...
    ├── public             # UI components
    ├── services           # 項目開發中一些經常使用的方法 主要存放和請求有關的
    ├── statics            # 靜態文件
    ├── template           # 模版文件
    ├── utils              # 項目開發中一些經常使用的方法 其實我以爲能夠和services 放在一塊，可是我的習慣仍是分開啦
    └── views              # pages
├── .eslintrc              # Eslint config
├── .babelrc               # babel config
├── .gitignore             #
└── package.json           #

開始擼代碼

1. 如何建立多頁面應用，首先你須要先有一個單頁面應用進行改裝，這裏我就再也不敲單頁面應用的案例啦～git上有demo，接下來的多頁面也是基於上述單頁面改裝

2. 開始大工程
   開箱即用react 多頁面
   上面是多頁面應用的demo 喜歡的請給個star

   在這很少說～只給你們說一下一些想法和注意點

   1. 單改多 === 你們都知道就是將入口改爲多個，可是具體怎麼實現？

      • demo中/build/pageEntry.js 文件就是專門處理多入口多頁面的，咱們藉助glob 這個node 模型來獲取入口文件 glob
      • 獲取完全部的目標文件接下來就是循環將全部的文件拼到入口上去啦（多頁面頁面配置的配置也是相同的道理）記得將webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js下面對應的代碼
   2. 到此爲止 基本一個簡單的多頁面應用已經完成啦，可是如今這樣的代碼並不能知足咱們平常的開發，由於這樣的話咱們每一次的開發都要在src/views/下面去建立一個文件夾，而後一個一個的建立文件，哇～想一想都好惡心，若是我要是這樣直接給我同事去用，我相信他們會罵死我～好～爲了避免讓隊友罵，那我就想一想怎麼讓他們一鍵生成

   3. 藉助shelljs模塊來簡化模版的建立

      • 請移步到demo中cli文件夾下面的createHtml.sh
      • 首先咱們先在src/template下面建一個通用的模版
      • 而後就是就是寫一個腳本實現指令執行的時候把template複製到對應的文件夾下面就能夠啦～本項目中使用 npm run cli-create 來建立開發界面
      • 嗯嗯～如今隊友們不罵我啦～哈哈哈

   4. 結果用了沒幾天，隊友又開始抱怨啦～需求多啦～頁面多啦，因此每回啓動項目的時候全部的界面都會啓動，但是每回我只調試某一個頁面，不須要啓動這麼多～怎麼辦怎麼辦怎麼辦～好吧～那就幹唄，還能怎麼辦

      • 請移步到demo中build文件夾下面的selectPage.js 文件 好吧～不知道咋說～你們本身看吧

   5. 如今基本上多頁面的應用大部分主要用於原生應用內嵌H5頁面，因此這就涉及到native和H5的通訊和H5頁面在移動端的調試問題啦

      • native和H5的通訊能夠查看JSBridge
      • H5頁面在移動端的調試 我在項目中引用的是eruda.js（用的時候別忘了在production環境要禁用哦！）
   6. 最後一點，移動端的適配demo中用的是vw，不過實際開發中你能夠直接去寫px；px轉vw也已作好，關於vw的移動端適配你們能夠google一下～

總結語～

在放一遍demo連接吧，喜歡個能夠給個星星，灰常感謝，接下來會繼續優化，啓動以後能夠選擇打開某一個界面，也不須要手動去輸入文件地址啦～哈哈哈～期待的話給star吧