All posts tagged 'npm' | The Will Will Web

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

發行 Angular Schematics 程式產生器與設定 .npmignore 的注意事項

昨天寫了一個小工具,可以自動將現有 Angular CLI 建立的專案,轉換成有 Hot Module Replacement (HMR) 功能的版本,只要簡單一個命令 ng add hmr-enabled 就可以搞定,非常方便。不過我在發布專案到 npm registry 的過程中,卻意外遺漏了幾個重要的檔案,原來是有檔案被 .npmignore 給忽略掉了,到了今天傍晚才修復。我們就立刻來看看這個錯誤是怎樣發生的!

... 繼續閱讀 ...

前端工程研究:如何在企業內部使用「完全離線」的方式安裝 npm 套件

許多企業在設法導入前端工程的過程中,最大的進入障礙竟然是「無法使用 npm 安裝套件」。因為真的有很多企業在嚴格執行資訊安全政策的情況下,所有開發者都無法從公司內部環境連到 npm 網站下載套件。這篇文章,我將分享幾個小技巧,幫助企業開發人員可以在內部實現簡易的 npm 離線快取。

... 繼續閱讀 ...

如何解決在 Windows 用 npm 安裝 TypeScript 之後 tsc 還是舊版的問題

由於 Angular 2 官方建議採用 TypeScript 做為主要的開發語言,一般來說 TypeScript 都會建議使用 npm 進行安裝,安裝後就可以在命令提示字元下使用 tsc 命令對 *.ts 進行編譯動作。不過這幾年 TypeScript 的變化很快,轉眼都已經到 1.8 版了。雖然透過 npm 安裝 TypeScript 是很容易的一件事,不過對於有安裝過 Visual Studio 的使用者來說,這條路可能會變得異常崎嶇,如果你在用 npm 安裝過 TypeScript 並且輸入 tsc.exe -v 總是顯示 1.0 版 ( 或低於 1.8 版) 的話,這篇文章你可能要繼續看下去。

... 繼續閱讀 ...

關於 PATH 環境變數過長而導致命令提示字元下無法執行特定程式的問題

最近由於經常在研究前端常用的各式工具,像是 npm, bower, gulp, webpack, yo, git 等等的工具用的很多,因此親手打指令執行程式的機會變多了,然而有好長一段時間間斷地出現了一些靈異現象,我卻無法解釋,直到最近終於發現了一些潛在的地雷,身處 Windows 平台下的前端工程師們不得不注意。由於我最近迷上了 Cmder 工具,在使用這套工具時可以讓我在輸入指令時,就像身在 Linux 環境下一樣自在,功能很多、支援鍵盤快速鍵、還支援命令與參數自動完成,非常好用,不過有時候卻發現他有點不太靈光,明明已經裝好了 npm 或 bower 工具,就是無法正常執行,我開啟 Windows 內建的「命令提示字元」視窗卻又可以執行。但問題是並不是永遠都不能執行,因為有時候又可以正常執行。這完全是一個農曆七月鬼打牆的概念,我將用這篇文章來說明問題背後的原理與解決方法。

... 繼續閱讀 ...

如何在強制使用代理伺服器的環境下設定 git, npm, bower, gem, ionic 工具

有些公司會要求員工上網時必須設定代理伺服器 (Proxy Server) ,在這樣的環境下使用這些前端工具經常會遇到許多網路連線的問題,本篇文章將說明如何針對 git, npm, bower, gem, ionic 等工具進行完整的代理伺服器設定,設定好之後就可以大幅漸少這些奇奇怪怪的問題。

... 繼續閱讀 ...

如何在 Windows 平台變更 Node.js / npm 全域模組的預設安裝路徑

由於 npm 本身的設計缺陷(直到 npm 3.x 才會改善),會導致安裝模組時,可能會因為特定模組用到相依模組而安裝非常多檔案與資料夾,而且資料夾的層級非常深,在 Mac OS X / Linux 環境下其實並不會有問題,但到了 Windows 環境下的問題可大了,因為 Windows 作業系統有路徑檔名的限制(完整的檔名必須少於 260 個字元,並且目錄名稱必須少於 248 個字元),即便到了 Windows 10 還是有這個限制存在,所以在 Windows 平台透過 npm 安裝套件時,經常會有「指定的路徑、檔名,或是兩者都太長」的錯誤發生,本篇文章將說明問題發生的原因與解決此問題的方法。

... 繼續閱讀 ...

前端工程師必須學會的現代化前端開發工具

最近有越來越多人踏入「前端工程」這個領域,也有許多人還在觀望,畢竟前端這個戰場也才剛開打沒幾年,現在要說是「戰國時期」也不為過,各種不同的框架、函式庫、工具每隔幾個月就會推出新版本,不然就是出現另一套全新的改良版,說實在的學也學不完。因此,本篇文章的目的就在於提供一個概略性的介紹,雖然無法盡數所有會用到的前端工具,但我把一些常用的都給介紹一遍,讓那些剛踏入前端或目前還在觀望的人一個參考指引。

... 繼續閱讀 ...

ASP.NET 5 Starter Web 專案內建的 NPM 設定檔 package.json 問題解決

之前一直沒有花時間去了解 npm ( Node 套件管理員 ) 的各種用法,尤其是 npm install --save 與 npm install --save-dev 的差異,今天再嘗試的時候,發現在我的本機電腦一直試不出這兩個命令有任何差異,套件都可以裝,但設定檔一直無法正確寫入,這種鬼打牆的事情,趁著這次年節假期徹底放鬆的時刻,終於被我抓到原來就是 package.json 這個檔案在搞鬼,欲知詳情,請繼續看下去。

... 繼續閱讀 ...

如何在 Windows 平台安裝與使用 Yeoman 1.0 相關工具

前陣子翻譯了一篇各式 Web 前端開發工具整理的文章,裡面介紹了許多好用的前端工具,其中 Yeoman 就是一個前端工具的組合,幫你統整前端網頁的開發流程 (Workflow),這是一種工作流程的改善,讓你減少重複的手工作業,也讓你更專注在網站的架構與設計上。不過,這些好用的工具大多透過指令的方式運作 (例如: 透過命令提示字元操作),雖然大多工具是跨平台的,但網路上找到的相關教學文章,都是以 Mac 電腦上的操作為主,因為 Mac 為 Unix-like 的作業系統,可以輕易開啟 Shell 環境,使用上相對順利許多,但到了 Windows 總是卡卡的,有時候甚至於還要 Visual Studio 才能安裝 (因為要編譯特定原始碼),今天我就特別寫一篇在 Windows 安裝與使用 Yeoman 的參考指南,幫助大家快速上手這些好用工具。

... 繼續閱讀 ...

如何使用 npm 工具對 node.js 套件進行自動安裝部署

昨天的文章用了比較辛苦的方式安裝好 UglifyJS 這個 node.js 套件,但今天就發現原來 node.js 已經有 npm 工具可管理所有 node.js 相關套件,原本我還以為目前沒什麼 node.js 可用,但得知 npm (Node Package Manager) 之後才發現已經有一大堆好用的工具用 node.js 寫好了,有興趣的快進來瞭解一下吧。

... 繼續閱讀 ...