使用pkg 建立nodejs執行檔

利用pkg可以把nodejs專案封裝成跨平台的執行檔案
就可以發布單一檔案給個測試平台
不過有幾點需要注意
1.es6轉換
  新版本的nodejs,可以直接運行es6
  不過要使用pkg須先透過babel轉成es5
2.透過pkg設定將其他的檔案封裝到執行檔內
  通常透過程式裡的require,會將相依的檔案封裝到
  應用程式內
  但若有其他如圖檔,css或其他js script要強制封裝進去
  可以透過在package.json內設定pkg來載入
  若設定了則需要透過pkg . 或 pkg package.json指令
  讓pkg知道要另外封裝這些檔案
pkg網址
package.json檔案範例

{
  "name": "simplesocket",
  "version": "1.0.0",
  "description": "build simple socket server excute file for web",
  "main": "lib/index.js",
  "bin": "lib/index.js",
  "scripts": {
    "start": "babel -s inline -d lib -w src | nodemon lib/index.js",
    "build": "pkg package.json --target node8-macos-x64,node8-win-x86 --out-dir output",
    "prepublish": "node_modules/babel-cli/bin/babel.js src --out-dir lib"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  },
  "pkg": {
    "scripts":"node_modules/extra../**/*.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ozzysun/simpleSocket.git"
  },
  "keywords": [
    "socketio",
    "express",
    "pkg"
  ],
  "author": "ozzysun",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ozzysun/simpleSocket/issues"
  },
  "homepage": "https://github.com/ozzysun/simpleSocket#readme",
  "dependencies": {
    ...
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "nodemon": "^1.11.0"
  }
  
}

single file component 使用 vuelidate

validate提供了vue很方便的資料驗證功能
以下是使用在Single File Component上程序

一.在框架上載入vuelidate

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

二.元件上使用
1.以mixin方式使用mixin加入

import { validationMixin } from 'vuelidate'
mixins:[validationMixin],
此時就可以在元件內加入validations來設定相關要驗證的規則
validations可以是物件
validations:{

}
也可以是method
validations(){
  return {}
}

這時候在元件內就可以得到this.$v來操作相關
2.import所要用到的validator,

import { required, minLength,maxLength,numeric } from 'vuelidate/lib/validators'

3.透過$v.model名稱取得該model的即時狀態
  依照取得的model狀態,來決定畫面要做如何的處置

三.Sample

<template>
  <div>
    <input type="password" v-model.trim="pwd">
    <button v-if="isActiveForSend" @click="clickSendBtn">送出</button>
    <span>這欄位所有狀態{{$v.pwd}}</span>
  </div>
</template>
<script>  
import { validationMixin } from 'vuelidate'
import { required, minLength,maxLength,numeric } from 'vuelidate/lib/validators'
export default {
  mixins:[validationMixin],
  validations(){
    return {
      pwd:{
        required,
        numeric,
        minLength: minLength(6),
        maxLength:maxLength(6)
      }
    }
  },
  computed:{
    isActiveForSend(){
      return this.$v.pwd.required&&this.$v.pwd.numeric&&this.$v.pwd.minLength&&this.$v.pwd.maxLength
    }
  },
}
</script>

webpack Uncaught SyntaxError: Unexpected token :錯誤

發現這問題找了很久
逐一檢查外掛module
發現是
chunk-manifest-webpack-plugin到1.1.2版造成

webpack Uncaught SyntaxError: Unexpected token :錯誤
回復到1.1.0版即可暫時

scss在使用 import media query

scss在使用@import
可以直接使用
@import "./style01.css" 載入其他css檔案
但若需要做meida query
@import "./style01.css" screen and (min-width: 640px)
這樣是會掛掉的
需改成

@import url("./style01.css") screen and (min-width: 640px)

所以可以統一@import時都使用url()都不會出錯