Object.defineProperty 覆寫已存在屬性

利用 Object.defineProperty可以為指定的
物件加上自訂的屬性資料
但在較舊的瀏覽器上若對已經存在的屬性去做重新設定則會發生錯誤
例 要在fn物件加上一個name的屬性

Object.defineProperty(fn, "name", { value: 'testName'})

這在android 4.x版預設的瀏覽器上會發生錯誤
如果改用其他property name 則可正常運作
例

Object.defineProperty(fn, "fnName", { value: 'testName'})

使用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()都不會出錯