webpack區分不同環境的api url

,

常常我們會把「前端本身跑專案的方式的環境」跟「開發流程的環境」搞混，都是叫做環境，但是我當初也是搞了很久才弄懂（汗

 

前端的專案環境通常由 webpack 區分成：

  • development：在本地跑起node serve專案，為方便開發而使用的方式。
  • production：webpack打包後產生的靜態檔案，會排除沒用到的依賴，部署要用的就是這種打包檔，一般會放在/dist裡。

開發流程環境通常會區分以下幾種：

  • development：工程師自己再開發的時候使用的環境。
  • sit：如果公司有QA團隊，這個環境會給QA測試。
  • uat：通過QA測試之後，會放到uat環境給客戶測試（到這邊都還只是測試）
  • production：正式環境，就是一般使用者會看到的釋出版本。

後端也會這樣區分，所以會關乎到你api路徑的設定。

閱讀更多
0
/0 評論/通過：

React實作上傳檔案預覽圖片

, ,

這是我想要實現的樣子：在一個卡片中點擊上傳檔案，上傳後的照片不能超出我設定的框框，太高就左右留白，太長就上下留白。

閱讀更多
0
/0 評論/通過：

新手安裝storybook在react專案上

, ,

跟團隊一起開發專案的時候，每個人自己都會包許多自己有用到的component，可是當我們去看別人寫的元件時，很難一眼就看出這個元件的外觀長怎樣、可以傳入哪些參數、傳入的參數有什麼作用…等，甚至我們都需要先在某個頁面把這個元件引入來預覽，可是又因為不知道要傳哪些必填參數，倒是元件也顯示不出來。

storybook 就是在專案中幫你建立一個頁面，顯示所有有建立stories(stories是一個副檔名有.stories.js的檔案，例如：Button.stories.js)的 component，並且下面會有控制項讓你切換看看哪些參數分別會有哪些效果，這樣就可以很快速地知道別人的元件要怎麼使用，脫離瞎子摸象的開發方式。

閱讀更多
1+
/0 評論/通過：

在storybook的doc中新增props的arg下拉選單

, ,

 

這邊用的是storybook 6.1.14＋react，我記得太舊storybook的版本還沒有這個功能，建議都先升級到6以上的版本，但是輸出stories的寫法會不同，升級前須再確認一下喔。

閱讀更多
1+
/0 評論/通過：

vue 全站使用 websocket 傳輸資料

,

已經很習慣串接 restful api，突然有個客戶說他的遊戲網站所有資料傳輸都是用 websocket，也就說一般我們打 api，會有開始送出 request 、結束收到 response，是一個有時間性的過程；但是如果是 websocket 的話，送出跟收到是無法放在同一個 function 裡等待（確保）他完成的。websocket 一但連線並開始監聽，就會隨時收到來自 server 的訊息，並不一定能代表這個回傳結果一定就是來自你剛剛送出的請求。

閱讀更多
0
/0 評論/通過：

vue 全站鎖右鍵

, ,

想要整個網站都鎖右鍵，就要寫在App.vue的mounted裡面。

閱讀更多
0
/0 評論/通過：

把本地檔案複製到AWS的EC2主機

業主在 aws 上使用了 ec2 的方案，登入的方式就是他丟給了我主機IP、使用者名稱、xxx.pem檔案，他們原本是用 putty 這個軟體登入，但無奈我是mac，沒那種東西，於是上網找了一下發現，其實只要一行指令就可以完成。

閱讀更多
0
/0 評論/通過：

把vue打包檔部署在特定路徑

,

因為客戶的網站有分成兩種類型，想要把網站部署在類似這種 domain.com/AAA, domain.com/BBB 的資料夾結構下，當初以為就把dist/整包給他放在他開好的資料夾就可以了，後來發現我大錯特錯，切換路由一直失敗，於是上網看了一下官網，發現只需要調整兩個步驟就可以了。

閱讀更多
0
/0 評論/通過：

Safari 出現 SyntaxError: Invalid regular expression: invalid group specifier name

,

專案中如果有使用到正則表示，在Safari瀏覽器會在某個正則規則下，無法解析出來，就會出現 SyntaxError: Invalid regular expression: invalid group specifier name 的錯誤，然後整個網頁就會空白。

閱讀更多
0
/0 評論/通過：

csv 轉成 i18n 可用的 json 格式

,

Convert CSV to json translation files

以前在前公司有使用 i18n，他們是把 i18n 的對照表放到 google sheet 管理，然後可以直接按下「轉檔」就匯出可以區分語言的 json 檔。

閱讀更多
0
/0 評論/通過：