nodejs 7.6 將原有method改用async

node 7.6後完全支援async的使用
原本利用callback取得非同步資料的寫法
在使用async時 可用以下方式改寫
ㄧ.原本要被執行的各個執行method 都需改成回傳Promise
1.原method 利用callback取得結果

var getData = (callback)=>{
  queryDB((err,result)=>{
    resultObj = {
      err:err
      data:result
    }
    callback(resultObj)
  })
}

2.method 改成return Promise
透過resolve與reject取得結果

let getData = ()=>{
  return new Promise((resolve,reject)=>{
    queryDB((err,result)=>{
      resultObj = {
        err:err
        data:result
      }
      if(err){
        //完成
        resolve(resultObj)
      }else{
        //錯誤
        reject(resultObj)
      }
    })
  })
}

二.使用async
1.原使用單位,直接呼叫,由callback取得結果

getData((resultObj)=>{
  console.log(resultObj)
})

2.改用async
需先定義一個async function,在aync function內去執行
透過try catch去取得正確與錯誤的資訊

const run = async ()=>{
  try{
    //取得結果,即是取得resolve傳進來的內容
    let resultObj = await lodaMethod()
  }catch (err) {
    //錯誤攔截 ,即是取得呼叫reject傳進來的內容
    console.log(err)
  }
}
run()

webpack使用html-webpack-plugin動態建立html

透過樣板動態產生html頁面內容
可以使用變數帶入要載入的js檔案,css檔案

plugin預設使用ejs樣板系統 不需設定loader即可直接使用
但樣板的副檔名 一定要是.ejs,樣板內可以使用lodash語法操作
一.主要的plugin設定

filename: '../index.html', #路徑是相對於webpack設定的 output.path
template: './src/index.ejs', #指定使用樣板,路徑是相對於gulp執行的位置
title: 'my title' #插入到html title
inject:是否插入 js與css檔案到html上

二.樣板內取得的資料來源
在樣板內可以直接取得以下三個物件資料
1.htmlWebpackPlugin

{
  "files": {
    "css": [ "main.min.css" ],
    "js": [ "bundle/main.min.js", "bundle/common.js"],
    "chunks": {
      "main.min": {
        "entry": "bundle/main.min.js",
        "css": [ "main.min.css" ]
      },
      "common": {
        "entry": "bundle/common.js",
        "css": []
      },
    }
  }
}

2.webpack 直接取到webpack state物件資料
3.webpackConfig 直接參考到目前使用的webpackConfig物件

三.在樣板內使用資料
1.若要自行控制載入js,css,需設定inject:false
2.取得檔案的路徑可以透過如
  htmlWebpackPlugin.files.chunks.xxx.entry拿到js路徑
例

<script src="<%=htmlWebpackPlugin.files.chunks['common'].entry%>"></script>

webpack css 圖檔路徑設定

透過require 載入css file
css內若包含了圖檔連結或是連結字型檔案
webpack在做bundle時,通常會把連結的圖檔抽離出來放到
設定的bundle目錄下
而css內的圖檔路徑連結基本上預設是與css同一目錄

但使用style-loader 會將css 內容塞到index.html內
而造成index網頁內的css會在同一層級找圖檔
找不到的問題

需要讓webpack bundle時可以將css內圖檔路徑指到
我們指定的路徑下
即可解決這個問題

webpack config loader設定

{
    test: /\.css$/,
    loader:"style-loader!css-loader" #針對css檔案載入並插入網頁內
},
{ 
    test: /\.(png)$/, #對於圖檔,使用file載入並指定圖檔讀取的目錄
    loader: 'file-loader?publicPath=bundle/' 
}

webpack 使用require.context做動態require

如果要做動態module require
直接使用 require("/"+name) 是不會理你的
因為在compile當下不知道你的變數值name是什麼
自然會找不到
透過使用require.context,他會針對指定的目錄下檔案
建立一份key mapping
例
req = require.context("comps", true, /\.coffee$/);
會針對comps下所有子目錄內的 coffee檔案建立一份
key索引
這部分可以透過
console.log req.keys()查看
例如可能內部索引會有如同
{
  0:"./comps/layout/mylayout/index.coffee"
  ....
}
所以就可以做動態require載入
Module = req('./comps/layout/mylayout/index.coffee')