vue-cli 3 webpack設定yaml讀取

目前已經將原本在框架下使用json設定檔案都改成yaml檔案
畢竟yml的結構比json要好上很多
在後端的nodejs上透過js-yaml即可讀取
前端上vue要使用
則需要透過webpack的js-yaml-loader的設定支援讀取
使用上可以很簡單的用
import data from 'js-yaml-loader!./conf/apis.yml'
這樣免設定的方式執行 但還是不太建議直接這樣用

如果是要設定到webpack的config上
使用vue-cli 3 會發現已經完全看不到webpack的設定
所有的設定已經都包裹在整個架構內
如果需要調整或增加webpack設定
可以在根目錄下建立vue.config.js檔案
用來覆寫或增加上定內容

參考vue-cli設定
https://cli.vuejs.org/guide/webpack.html#simple-configuration

以下sample code範例為
修改連線port 並加入yaml loader

module.exports = {
  devServer: {
    port: 1234
  },
  chainWebpack: config => {
    config.module
      .rule('yaml')
      .test(/\.ya?ml$/)
      .use('js-yaml-loader')
      .loader('js-yaml-loader')
      .end()
  }
}

nodejs 使用mocha+supertest做api測試

因為是使用mocha做單元測試
是可以把測試api 與測試function的部分
一起執行
幾個地方注意
1.當需要在執行API測試前後做一些資料處理
  例如塞入token 這部分都會是放在
  beforeEach與afterEach內執行
2.預期會是在執行beforeEach後才會去執行it測試
  但當beforeEach需要執行非同步的功能
  需帶入done callback 當作在執行完成時
  往下執行的通知點
3.beforeEach內要執行async method
  若直接用async/await執行會有問題時
  改用promise方式執行 可以解決
4.API測試 若回傳為json物件
  可以透過res.body拿到 object型態的資料
  若透過res.text 拿到的資料類型會是text 需要自己轉成物件
5.API測試 若回傳為text
  透過res.text 拿到取得的資料,若去拿res.body會是個空物件{}

使用參考
https://github.com/visionmedia/supertest
sample Code

describe('測試 sample 目錄', () => {
  beforeEach((done) => {
    // 測試前需要執行的工作
    runServer().then(response => {
      server = response.server
      api = supertest(server)
      done()
    })
  })
  afterEach((done) => {
    // 測試結束前需要執行的工作
    server.close()
    done()
  })
  it('sample/text 測試', (done) => {
    api.get('/sample/text')
      .expect('Content-Type', /text/)
      .expect(200)
      .end((err, response) => {
        if (err) return done(err)
        console.log('response text====')
        console.log(typeof response.text)
        console.log(response.body)
        done()
      })
  })
  it('sample/json 測試', (done) => {
    api.get('/sample/json')
      .expect('Content-Type', /json/)
      .expect(200)
      .end((err, response) => {
        if (err) return done(err)
        console.log('response json====')
        console.log(response.body)
        done()
      })
  })
})

nodejs 絕對路徑

執行 nodejs 可能會對 文件路徑與指令路徑有混淆的狀況
__dirname 目前為文件所在目錄
process.cwd() 執行指令所在的目錄
舉例來說

檔案目錄結構為
/myproject/bin/run
/myproject/src/utils/folder/01.js

在bin目錄下 執行 run ../src/utils/folder/01.js
__dirname = '/myproject/src/utils/folder'
process.cwd() = '/myproject/bin'

升級gulp4 'Did you forget to signal async completion?'錯誤解法

1.改為 async + await

gulp.task('build', async() => {
  await execBuild()
})

2.使用回傳的done

gulp.task('build', (done) => {
  execBuild()
  done()
})

暑假 長濱

在長濱住了幾天
這個在台東與花蓮交界處的小鎮
熱鬧的地方大概就是那短短的一條街
從台中過來開飯館的大姐
從高雄移居到這裡開民宿的資深工程師
還有從台南來到這裡開書店的書粥
聽說今年是最後一屆 的鹽寮海或瘋市集
自由的氣息 感覺像是嬉皮的天堂