Home » Posts tagged "npm"

nvm 換 n

前幾天在 Twitter 上抱怨 nvm 很慢,導致 Zsh 開起來很頓 (然後也同步到 Facebook 上):

原因在於 .bashrc 或是 .zshrc 內初始化 nvm 時會呼叫 npm config get prefix,而這個命令很慢:「`npm config get prefix` takes incredibly long (7 - 70 seconds) #14458」。

後來在 Facebook 的留言處有朋友提了幾個方案... 其中一個是 n,花了些時間看軟體架構,有夠簡單... XD 對於不是拿 Node.js 開發的人應該是夠用了 (我只拿來跑一些用 Node.js 寫的工具)。

整個軟體就一個 shell script,把他丟進 ~/bin/ 裡面 (我有把 ~/bin/ 放到 PATH 裡),就可以用了。透過 N_PREFIX 設定他的基地 (預設是 /usr/local,我是設成 $HOME),剩下就跑 n lts,他就把 nodenpm 兩個檔案裝好給你用。

路徑的部份要自己設定,將 $N_PREFIX/node_modules/.bin 放進 PATH,這樣安裝起來的模組如果有可執行工具可以用才能直接跑 (像是 gulp.js 的命令)。

另外,之所以會說不適合開發者用的部份,是因為 module 是跨版本共用的 (切換 node 版本時就是用另外一個版本配上去 XD),所以比較不適合開發者使用...

在 Python 的 pip、Nodejs 的 npm、Ruby 的 RubyGems 上面放木馬研究?

在 Python 領域裡常用 pip 安裝軟體:

$ pip install reqeusts

或是:

$ sudo pip install reqeusts

其他的平台也大致類似於這樣的動作。而在「Typosquatting programming language package managers」這篇文章裡,作者用 typo 之類的方式列出可能的名稱,像是這樣的名稱:

$ sudo pip install reqeusts

然後在這三個平台上發動攻擊,上傳了數百個套件並且觀察:

All in all, I created over 200 such packages and equipped them with a small program and uploaded them over the course of several months. The idea is to add some code to the packages that is executed whenever the package is downloaded with the installing user rights.

而這是「成果」:

用 npm 取代 Build Tools (像是 gulp 或 grunt)

這篇「How to Use npm as a Build Tool」教你如何用 package.jsonscripts 取代 gulp 或是 grunt 這類 Build Tools。

文章裡面可以看到各種奇技淫巧都出現了,dependency 的部份用 recursive 解決 (npm 內部自己再呼叫 npm 執行),stream 的部份用 pipe 解決 (這個到是很自然),然後用外部程式掛進來處理 watch 與 livereload,甚至還出現可以自己寫 js 檔案呼叫的方法... XDDD

無所不用其極!反正我就是不要用 gulp 與 grunt... XD

可以欣賞一下怎麼做的...

Ubuntu 下建立 Cordova 的 Android 環境...

依照「Cordova: Getting Started with iOS and Android Applications (Tech Tip #14)」這篇的方法,再加上一些以前練出來的經驗,把系統給弄起來了。

首先是先到 Android 官網下載 Android SDK,目前版本是 adt-bundle-linux-x86_64-20131030,找個合適的地方解開後 (我是放到 $HOME/android 下),把 PATH 加進去:

export PATH="${HOME}/android/sdk/platform-tools:${HOME}/android/sdk/tools:${PATH}"

接下來是透過 nvm 安裝 node.js,先安裝 nvm:

wget https://raw.github.com/creationix/nvm/master/install.sh
sh install.sh

然後重新啟動 shell 讓 nvm 與 PATH 生效後,安裝 0.10.26 (目前的最新版),並且預設用這個版本:

nvm install 0.10.26
nvm alias default 0.10.26

接下來一樣是重新啟動 shell,就可以裝 Cordova 了:

npm install cordova

後面就可以照抄原始範例:

cordova create hello org.samples.wildfly.cordova.hello HelloWorld
cd hello
cordova platform add android
android create avd --name myCordova --target 1
cordova emulate android

然後 AVD 是有名的慢,請耐心等候... XD

跑出來長這樣:

用 browserify 將 npm 的函式庫包到瀏覽器上用...

browserify 可以將用到的程式碼都包成一包,拿到瀏覽器上使用。

舉個例子離說,先寫了一個 a.js

(function(){
    var el = document.getElementById('output');

    var j2x = require('json2xml');
    el.innerText = j2x({a: 1});
})();

其中可以看到直接拿 require()json2xml 抓進來。但在瀏覽器裡要自己處理有哪些 dependency 很麻煩,就用 browserify 拉出來:

browserify a.js -o a.bundle.src.js

生出來的 a.bundle.src.js 就可以拿到瀏覽器裡使用了!如果需要的話,還可以用 JS Compressor 再壓起來再拿到瀏覽器裡使用。

最後補充一下,browserify 的安裝方式很簡單:

npm install browserify

就是這樣而已。

用 BrowserSync 測試多個平台...

BrowserSync 是用 node.js 寫的工具,可以同時測試一堆 device,修改後不用按 reload,印象中已經有套件可以做類似的事情?

一般用 npm 裝就可以了:

npm install browser-sync

最簡單的方法是直接執行 browser-sync,執行後會出現像這樣的訊息:

<script src='//192.168.1.1:3000/socket.io/socket.io.js'></script>
<script>var ___socket___ = io.connect('http://192.168.1.1:3000');</script>
<script src='//192.168.1.1:3001/client/browser-sync-client.0.6.0.js'></script>

把這段程式碼貼到 body 的最後面就可以了,當 BrowerSync 偵測到檔案有更新時會透過 server push 機制重刷頁面。

另外,也可以產生 bs-config.js 修改設定:

browser-sync --init

更完整的說明可以從「Options」這頁找到。

Archives