【Browserify】 增加node_modules以外的預設路徑

Browserify可以做什麼?

Browserify可以很方便的將js模組化,讓你維護起js可以輕鬆許多(你不會想在上千行的code找某個methon...Orz..)。

專案中,我們使用npm安裝常使用的套件,如:jqueryangular之類的,只要在專案中安裝完成後,在js文件中輸入:

global.$ = global.jQuery = require('jquery');
var angular = require('angular');

$('.gogo').css('display', 'none');

就可以很順利的使用jquery和angular!!!是不是超方便XD~~~~(興奮)

但總會遇到npm沒有的套件,bower才有,或著到後來你的路徑會變得很深深深....,require路徑就有可能變成:

// app.js

var bootstrap = require('./bower_components/bootstrap/dist/bootstrap');
var bootstrap_a = require('./bower_components/bootstrap_a/src/bootstrap_a');
var foo = require('../../../../foo.js');
var roo = require('./a/b/c/d/roo.js');

看到上面這些路徑,基本上已經先飽了一半,那有什麼辦法可以減少輸入冗長的路徑呢? 這就是接下來我們要說明的。

增加載入時的路徑

我們參考 node-browserify 的issue,【Document how to avoid relative paths hell #767】,可以發現有幾種以下方式:

  1. 修改預設 node_modules 路徑
  2. browserify 的 paths 參數
  3. 使用 aliasify 做轉換

接下來我們將會針對這3種方法來做說明。

1. 修改預設 node_modules 路徑

一開始想說,將 npm 的預設路徑和 bower 的設定在相同資料夾,這樣就可以把所有外部資源統一管理,但查了 browserify 的文件(參考browserify-handbook),說法上是不建議任意修改node的安裝路徑

custom paths

You might see some places talk about using the $NODE_PATH environment variable or opts.paths to add directories for node and browserify to look in to find modules.

Unlike most other platforms, using a shell-style array of path directories with $NODE_PATH is not as favorable in node compared to making effective use of the node_modules directory.

This is because your application is more tightly coupled to a runtime environment configuration so there are more moving parts and your application will only work when your environment is setup correctly.

node and browserify both support but discourage the use of $NODE_PATH.

大意就是不建議去修改,想想也覺得這樣挺怪的,如果你有嘗試可以跟我分享一下。

2. browserify 的 paths 參數

像我在編譯 browserify 是透過 gulp,Rails 上也有 browserify-rails,設定上也有些不同,前者我在編譯的為:

// gulpfile.js

var bundler = watchify(browserify('./' + SETTINGS.src.js + 'default.js', watchify.args));

只需對 browserify 傳送paths參數就可以了,改寫後如下:

// gulpfile.js

var bundler = watchify(browserify('./' + SETTINGS.src.js + 'default.js', {
  paths: ['./node_modules', './bower_components/', '../../../../', './a/b/c/d/']
}));

接著回去我們 js 中做改寫:

var bootstrap = require('bootstrap/dist/bootstrap');
var bootstrap_a = require('bootstrap_a/src/bootstrap_a');
var foo = require('foo.js');
var roo = require('roo.js');

這樣就能順利讀取了,是不是看起來乾淨很多XD~。

3. 使用 aliasify 做轉換

aliasify 這個 npm 可以讓你透過 package.json 去設定檔案的別名,假設原先我們呼叫的檔案為:

var d3 = require('../../shims/d3.js'),
         _ = require('lodash');

安裝完 aliasify 後我們到 package.json 做以下設定:

{
    "aliasify": {
        aliases: {
            "d3": "./shims/d3.js"
            "underscore": "lodash"
        }
    }
}

接著,我們回到呼叫的部份改寫:

var d3 = require('d3'),
     _ = require('underscore');

簡短好多阿XD~~~

那該選擇使用哪種方法?

個人認為,修改新增 path 的方法,比較適合你有大量的js,在某個路徑底下,很多 module 都有可能會用到的狀況下可以做設定,因為就只需要輸入檔案名稱就好,前面的路徑都透過 paths 的方式做取代。

而 aliasify 的方式呢,比較針對單獨某支 js ,或著你要針對已經在 node_module 裡面的套件做改名,比較類似 libary 或 framework 這種來使用。

Comments

comments powered by Disqus