穠纖合度的整合 Rails、Webpack、Vuejs

前言

如果您曾經閱讀過小弟的vue + webpack 起手式一文,裡面我曾提到關於容易與傳統 MVC 框架(Rails, ASP.NET MVC)等結合。這篇文章主要就是用來介紹其作法與為什麼我會這麼說。

我先承認吧!我不總是需要使用 SPA 的架構 雖然它很好,但對於很多小型專案,或者我們應該說 UI/UX 設計本身非常單純的專案 - 殺雞焉用牛刀。所以這邊文章的作法針對的是那些專案不是使用 SPA 搭配 API 的架構的人,而是您覺得既有的 MVC 框架對於您的需求開發已經非常足夠且想保留大多數這些框架提供的功能(本文僅針對 Rails 介紹)。

網路上有非常多關於 Rails 與 Webpack 整合的方式,其實都非常不錯。而關於本文只是介紹其中一種小弟認為剛剛好的整合方式,其中許多觀念都不是新創的,都只是整理過去學習經驗而成。

繼續閱讀

npm 最佳實作的小技巧

npm 最佳實作

npm install 是我們最常在 npm 中用到的指令,但其實它還提供了更多的功能。在這篇文章中我們將會學到 npm 如何在開發過程中協助我們 - 從建立專案到部署應用程式。

繼續閱讀

Node 實作 jwt 驗證 API

基於 token 的驗證機制

在今天,我們應該常常能看到大量使用 token 來處理驗證的服務,由於大部分的網站服務開始大量使用 API,於是 token 就成了處理驗證使用者最好的方式。
我們的應用程式選擇使用 token 驗證機制有些非常重要的原因,最主要是因為:

  • 對於伺服器來說它具備 stateless(無狀態), scalable(擴展性)
  • 移動裝置也能一併使用
  • 可將驗證結果導向其他應用程式
  • 更安全
繼續閱讀

NodeJS path

範例筆記

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/**
* 詳細教學
* http://www.tutorialspoint.com/nodejs/nodejs_path_module.htm
*/

// 正常化
path.normalize('/1/../2'); // => /2

// 把所有路徑整合在一起並且正常化
path.join('a', 'b'); // =>'a/b'
path.join('a', './b'); // => a/b'
path.join('a', '/b'); // =>'a/b'
path.join('/1', '/2/3', '../4'); // => /1/2/4


// 從第一個路徑,照著後面切換最後回傳絕對路徑
path.resolve('/from', '/to/path1', '/to/path2'); // => /to/path2
path.isAbsolute('/'); // => true

// 從 from 到 to 的相對路徑
path.relative('..', './A/B'); // => [project]/A/B

// 回傳該檔案所在的目錄
path.dirname('node_modules/bin/webpack'); // => node_modules/bin
path.dirname('./node_modules/bin/webpack'); // => ./node_modules/bin

// 回傳路徑最後的部分,包含副檔名
path.basename('node_modules/bin/webpack'); // => webpack
path.basename('/1/2/3.js'); // => 3.js

// 只取副檔名 + .
path.extname('/1/2/3.js'); // => .js

// 將路徑解析成物件
path.parse('/1/2/3.js'); // =>

// 從物件轉成字串
path.format({ root: '/', dir: '/1/2', base: '3.js', ext: '.js', name: '3' }); // => /1/2/3.js

第一次用 jspm 就上手

何謂 jspm ?

jspm (javascript package manager) 號稱是完全支援(無摩擦)瀏覽器載入的套件管理工具

繼續閱讀