typora-copy-images-to: images
typora-root-url: ./

專案構建

1.使用express生成專案

1.安裝 express

　　1.應用生成器工具 express-generator 可以快速建立一個應用的骨架。

　　$ npm install express-generator -g

　　2.如下命令建立了一個名稱為 myapp 的 Express 應用。此應用將在當前目錄下的 myapp 目錄中建立，並且設定為使用 Pug 模板引擎(不帶模板引擎--no-view)

$ express --view=pug myapp

　　3.然後安裝所有依賴包：

$ cd myapp $ npm install

　　4.通過如下命令啟動此應用：

npm start

2.配置自動化重新整理頁面

npm install --save-dev nodemon

　　修改 package.json 的 scripts 內容：

"scripts": {    
    "start": "node ./bin/www",    
    "devstart": "nodemon ./bin/www"  
}

此處mpapp為資料夾名稱需要更換

SET DEBUG=myapp:* & npm run devstart

我的啟動配置項

package.json

  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www",
    "dev": "SET DEBUG=REACTAPP:* & npm run devstart"
  },
 

根目錄建立nodemon.json程式碼如下：

{
    "restartable": "rs",
    "ignore": [
        ".git",
        ".svn",
        "node_modules/**/node_modules"
    ],
    "verbose": true,
    "execMap": {
        "js": "node --harmony"
    },
    "watch": [
 
    ],
    "env": {
        "NODE_ENV": "development"
    },
    "ext": "js json"
}
 

執行npm run dev 即可

缺點：可以監聽到jsx變化服務不需要重啟，但頁面還是需要手動重新整理

3.使用包express-react-views配置JSX

npm install express-react-views react react-dom

注意：您必須顯式安裝react為依賴項。從v0.5開始，react這裡是一個對等依賴項。這是為了避免使用不相容版本時可能出現的問題。

將其新增到您的應用程式。

// app.js

var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

4.安裝react相關依賴

cnpm install react react-dom axios --save-dev