• 本人全職喵姐，兼職程式設計師，才疏學淺，大神如果有好的idea能指點迷津的話感激不盡。以下專案為純手工搭建的Webpack4+React+KOA2+PM2前端豆腐渣工程，房子的簡陋模型，入門教程以及流程指引。後續要精裝修還是蓋茅草屋看你自己了……/微微笑（自帶表情包）……先學習…...
• gitHub地址：https://github.com/susuGirl/frame

• 微信公眾號：fuxiaodexing

• 
  • devDependencies 用於開發環境，生產環境不會被打入包內
  • dependencies 用於生產環境，此處依賴的包開發和生產環境都能用
  • 通過NODE_ENV=developement或NODE_ENV=production指定開發還是生產環境
  • 所以安裝模組的時候，—save會安裝到生產環境，—save-dev會安裝到開發環境

Webpack

• 下載安裝webpack
  • sudo npm install webpack webpack-cli webpack-dev-server -g
  • 
• 建立資料夾：mkdir config dist src
• 初始化npm，生成package.js檔案：npm init
• 建立檔案：touch dist/index.html src/index.js
  • 成的檔案目錄
  • 
• 打個包試試看
  • 
• 打包成功，生成了打包後的main.js檔案（預設打包的 src/index.js 檔案）
  • 
• 打包黃色警告：
  • mode是webpack中獨有的，有兩種打包環境，一個是開發環境：development 另外一個是生產環境：production
  • 打包的時候輸入webpack --mode=development或者webpack --mode=production就不會出現警告提示了
  • 
  • 
• 開始自己簡單配置 webpack
  • touch config/webpack.dev.js
  • 
• 刪除檔案，清理目錄：rm dist/main.js src/index.js
  • 
• 建立入口檔案：touch src/main.js
• 打包執行 webpack --mode=“development 報錯
  • webpack4打包預設找的src下面的index.js入口，我們前面已經刪除了，這裡src下面是main.js檔案，所以找不到
  • 配置 config/webpack.dev.js檔案
    • 需要設定多個入口檔案時：touch src/main2.js
  • 
  • 配置 package.json 檔案："build": "webpack --config=config/webpack.dev.js"
  • 然後執行 npm run build
    • 
    • 
• webpack-dev-server 熱更新配置，修改程式碼儲存時瀏覽器實時更新頁面
  • 
  • 
• 分離開發環境和生產環境的配置
  • npm install webpack-merge -D  // 安裝依賴：[email protected]
  • 建立檔案：touch config/webpack.base.js config/webpack.prod.js 如圖配置
  • 
  • 
• 因為html頁面需要引入打包後的js檔案，但是我們打包輸出的檔案一般會加上雜湊值什麼的，所以需要自動化生成 HTML 頁面，自動引入打包後的檔案
  • 引入依賴：npm i --save-dev html-webpack-plugin
  • 建立檔案：touch src/index.html
  • 
  • 
• babel ：ES5轉ES6 注意版本，版本不對報一些亂七八糟的玩意兒尤其是core這熊孩子
  • 然後告訴一些跟我一樣無聊的人，像我一樣在專案裡用了ES6語法然後想看看不裝babel能不能解析的，我告訴你goole瀏覽器是可以解析的/翻白眼，goole是對開發者最友好的瀏覽器，但是別人用的瀏覽器五花八門多了去了版本高低不齊，滿足一下好奇心就可以了該裝的還是要裝的，總要相容一下歲數大了的瀏覽器四不四
  • 

React

• 現在開始 React 專案：磨刀霍霍開始進入正題，別問我為什麼webpack介麼簡陋，我只需要它現在能跑的動就行了，至於找你跑，效率問題後續再搞（勞資說什麼你都要反駁，你個槓精/呼你一巴掌）
• npm i -S react react-dom
  • [email protected]
  • [email protected]
• npm i react-router-dom -S
  • [email protected]
• 建立檔案：根據配圖配置內容
  • mkdir src/router src/views
  • mkdir src/views/App
  • touch src/router/index.js src/views/App/index.js
  • mkdir src/views/First src/views/Second src/views/Third
  • touch src/views/First/index.js src/views/Second/index.js src/views/Third/index.js
  • 
  • 
  • 然後服務跑起來，沒毛病，頁面正常顯示正常跳轉，but 少年你還是太年輕了，你以為這是腳手架嗎？什麼事都幫你幹好了？現在，請重新整理你的頁面：首頁沒問題？那換其他頁面重新整理試試看
  • 
  • So surprise 四不四？因為以前用的腳手架重新整理頁面不會404是因為他們很貼心的本地都幫你配好node服務了。現在為什麼本地重新整理404了呢？因為這是單頁面SPA應用啊，而且是極簡版/哭笑不得
  • 原因：單頁面應用只有一個真實路由，這裡順便涉及到ssr服務端渲染的問題了

SSR強行解釋一波：

• 
• 單頁面應用不管是元件的hash模式還是真實路由模式，其實都是先載入入口，再往入口的坑裡填相應的元件
• 所以不管是載入 /a 還是 /#/b  都會先載入 / ，也就是先載入前面那段真實路由，即入口檔案
• 但是如果你不是先進的 / ，後進 /a 或 /b，而是越過了 / ，直接在頁面載入 /a ，因為跳過了入口，所以會導致頁面 404
• 因為單頁面應用，其實都是虛擬路由，不是真正的路由
• 因此，我們需要再配置服務端的真實路由，讓使用者直接訪問 /a 時也能正常訪問頁面
• 真實路由和虛擬路由相結合，如果是從入口一步一步往下走的就走虛擬路由的配置，如果是跳過入口直接訪問的頁面，就會走真實路由的配置。虛擬路由提高頁面的響應速度，真實路由有利於SEO
• Vue SSR 官網瞭解一下，講的挺清楚的
  • 伺服器需要做好處理 URL 的準備。處理應用啟動最初的 / 這樣的請求應該沒問題，但當用戶來回跳轉並在 /accounts/123 重新整理時，伺服器就會收到來自 /accounts/123 的請求，這時你需要處理這個 URL 並在響應中包含 JavaScript 應用程式碼
  • https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%EF%BC%9F
• 解釋完畢，下面就選方案吧，express還是nginx呢？OH NO，我選KOA2，就是這麼任性
• nginx反向代理能處理路由問題，但是他只能把路由重新指過去能做的操作比較侷限，而且偏噁心，誰讓人家是兼職的呢，但是全職處理ssr問題的express和koa，可擴充套件性比較高能幹很多事情。但是koa2是express的原班人馬打造的升級版，那對於走在技術前沿的我們肯定選升級版的裝備四不四？！！！

KOA2 pm2

• KOA2淌坑走起：超簡易版，我是網上是在是查不到我想要的資料，所以只能自己慢慢懟了，萬分期待有大神為我講解KOA2用法的豪華版
• 
• 為什麼 index.js 檔案只有三行程式碼只是引入serve.js檔案？因為我們server.js檔案裡使用了import引入包的方式，起node服務的入口檔案不能含有這些，所以只能用index.js包一層
• 
• 
• 
• 配置完以上內容豆腐渣工程就建好啦，本地跑 node index.js 沒問題，重新整理頁面也不會404了
• 現在需要進行打包，以及將專案放在伺服器上跑
• 
• npm run build 打包出錯？？？what？？？因為那些模組都被打包編譯了，而且我們需要告訴webpack，你現在打包的是web環境還是node環境，用 target 指定
• 
• 安裝依賴：npm install webpack-node-externals --save-dev
  • 防止將某些 import 的包被打包，而是在執行時再去外部獲取這些擴充套件依賴
  • https://www.npmjs.com/package/webpack-node-externals
• 建立檔案：touch config/webpack.server.js
• 
• 
• 
• 現在執行命令：
  • node index.js
  • node dist/index.js
  • pm2 start index.js（事先全域性安裝pm2即可：npm install -g pm2）
  • pm2 start dist/index.js
  • 都執行成功，並且實現首屏載入，也就是說，現在你的專案可以部署到伺服器去跑了
  • 
  • 

配置伺服器環境

• 下載 nvm

  • wget https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

• 自動生成 install.sh 檔案

  • 

• source ./install.sh

• 檢視nvm是否安裝成功：nvm --version

  • 

• 用nvm下載 nodeJs

  • 報錯：nvm_has: command not found

  • 

  • 執行命令：source ~/.profile

  • 然後：nvm install v8.11.3 再根據下圖檢視以及安裝pm2

  • 

• 然後把你的專案放到伺服器上，配置好反向代理，比如 nginx
• 然後用pm2跑起來就可以了
• 以上房子模型搭好了，後面就可以打地基和裝修了，但你可以選擇給這豆腐渣工程加上鋼筋水泥來練手，畢竟現在網上腳手架辣麼多，很多時候其實不需要我們純手工去搭建一個專案。但是我覺得吧，我們不能總是用別人的工具是吧，天天踩別人的坑，我們也得自己去知道這些工具怎麼來的，這些坑怎麼造成的，然後就可以全力開發一款屬於自己的腳手架偷偷埋一些不易發現的小坑，騙別人來踩/興奮