Leon's Blogging

Coding blogging for hackers.

前端工具整理 NVM,NPM,YARN,Webpack,Babel 等等

| Comments

前端工具，名詞實在太多了，這篇就來簡單記錄一下!

NVM

管理 npm 工具，類似 rvm

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

#根據當下最新版本
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash

#將以下放到自己的 ~/.zshrc or ~/.bashrc or .bash_profile 下面（預設會自動放好，但還是去確定一下）
export NVM_DIR="/Users/leon/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm%

#重新載入 Shell
. ~/.nvm/nvm.sh or source ~/.zshrc

# 安裝穩定版本的 NodeJS
nvm install stable

#顯示目前可以安裝的版本
nvm ls-remote

#安裝 NodeJS
nvm install <version>

#安裝穩定版本的 NodeJS
nvm install stable

#使用版本，只有在當下，重新開新tab就會消失
nvm use stable

#設定預設版本，永久
nvm alias default stable

#看目前安裝所有版本
ls -a ~/.nvm/versions/node

NPM

套件管理

npm

資料夾一定會有 package.json

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

#搜尋 npm 套件，但建議去網站上比較快
npm search

#本地安裝，會安裝在當前專案的 node_modules 目錄下
npm install <package name>

#全域安裝，會將套件安裝在統一的 npm 目錄底下
npm install -g <package name>

#列出專案使用套件
npm ls (-g 全域套件)

#更新專案套件
npm update (-g 全域套件)

#移除專案套件
npm uninstall <package name> (-g 全域套件)

#清快取
npm cache clean

#查詢 npm 儲存路徑
npm config get prefix

#自動安裝 package.json 套件定義檔中定義的所有套件
npm install

#安裝套件並儲存在 package.json 中
npm install <package name> --save #用於上線時必要的套件(react, bootstrap…)，會更新到package.json裡的Dependencies(上線依賴)
npm install <package name> --save-dev #用來安裝開發時用的工具(ex babel, webpack, webpack-dev-server…)，會更新到package.json裡的devDependencies(開發依賴)

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#自動產生 package.json
npm init

{
  "name": "leon",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies":{#套件相依
  },
  "devDependencies": {#開發套件相依
    "lodash": "^4.15.0" #示範加上去的
  }
}

Yarn

Facebook 開源的 Yarn，這是針對存儲在 npm 或 Bower 註冊表中的 JavaScript 模組的一個代理包管理器。

1
2
3
4
5
6
7
8
9
10
11
12
13

brew install yarn

# -g 為 global 的意思，沒有加的話，會裝在當下的
yarn global add vue-cli

# 安裝指定套件 (會自動 save 到 package.json)
yarn add sass sass-loader node-sass

# 安裝 package.json 內其它套件
yarn install

# run project
yarn run start

Bower

Bower 由 Twitter 團隊開發的前端套件管理工具，用來管理或安裝 Web 開發所需要的 Package，像是 CSS 和 JavaScript，也可以依據套件的相依性來安裝

簡單來說，開發者不用再去煩惱套件相依性問題

主要用來做前端資源依賴管理，跟npm很像，區別在於：npm管理的是node模組的依賴，bower管理的是前端資源的依賴，如css、javascript文件等。

  • 快速管理與安裝網頁前端套件。
  • 易於檢視專案的套件相依性，僅需檢查 bower.json 即可知道專案使用了哪些套件及版本。
  • 一鍵佈署或更新網站所需要使用的套件。
1

npm install -g bower --save-dev

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

# 查詢相關指令
bower help

# 查詢已經安裝的套件
bower list

# 搜尋套件
bower search <name>

# 移除已安裝的套件
bower uninstall <name>

# 升級已安裝套件
bower update <name>

# 顯示該套件的 bower.json
bower info <name>

# 透過 bower.json 來安裝相依套件
bower install
# registered package
bower install jquery
# GitHub shorthand
bower install desandro/masonry
# Git endpoint
bower install git://github.com/user/package.git
# URL
bower install http://example.com/script.js

Grunt

The JavaScript Task Runner，可以透過一些設定讓你輕鬆完成一些例行性的任務，例如壓縮檔案，編譯 coffee less，搬移到目標目錄，單元測試等等。(類似 Ruby 中的 rake)

建構工具，主要用來運行各種任務，比如文件壓縮、合併、打包等

在新專案使用Grunt，必須要先有兩個檔案

  • package.json
  • Gruntfile

在package.json中，Grunt 和Grunt 任務會用的到外掛，都會列在devDependencies 中。

1

npm install -g grunt-cli --save-dev

1
2

# 查詢相關指令
grunt --help

Gulp

跟 grunt 做的事一樣，但是效能比較好

  • 程式碼撰寫風格檢查、程式碼品質分析
  • 最小化(Minification)、醜化(Uglify)
  • 合併檔案 (Concatenation)
  • 套用格式轉換 (Less, Sass, TypeScript, Babel, … ) • 套用 Vendor prefixes
  • 自動注入 JS/CSS 引用到 HTML 之中 • 更新套件版本
  • 快取HTML範本
  • 單元測試、整合測試、連續性整合
1

npm install -g gulp --save-dev

主要是寫在 gulpfile.js

yeoman

用來自動產生網站骨架或程式碼的工具

包含以下三套工具，分別說明如下：

  • yo - scaffolding tool from Yeoman 用來自動產生網站骨架或程式碼的工具
  • bower - 用來管理特定網站下所使用的各式前端套件，如: jQuery
  • grunt - 用來執行一些網站的自動化工作，例如單元測試、最小化、執行批次命令
1

npm install -g yo --save-dev

Yeoman自動建構js項目

以上比較

  • bower - 用來做前端資源依賴管理，跟npm很像，區別在於

    • npm管理的是node模組的依賴
    • bower管理的是前端資源的依賴，如css、javascript文件等，之後就不需要手動下載和管理你的腳本文件。

  • grunt/gulp - 一個幫助我們自動管理和運行JavaScript的任務之執行工具，可以用了檢查程式碼語法是否正確，壓縮程式碼，合併文件，透過Grunt可以簡化我們的工作流程。

  • Yeoman - 一個 Web 應用的架構（scaffolding）工具。它提供了非常多的樣板，用來生成不同類型的 Web 應用。這些樣板稱為生成器（generator）。

參考文件：

Browserify

允許用 nodejs 的程式碼風格來定義模組，並使用在瀏覽器上，可以完全跟nodejs後端模組通用,保持單個功能模組的重用性.

  • module.exports 來匯出模組功能
  • require 來請求某個模組
1

npm install -g browserify --save-dev

Webpack

Webpack是所謂的模組打包工具，它可以幫你把各種文件(JS、JSX、coffee、less/sass…、圖片）打包成一系列的靜態資源來使用。

  • 將你的 js 檔案 Bundle 變成單一的檔案
  • 在你的前端程式碼中使用 npm packages
  • 撰寫 JavaScript ES6 或 ES7（需要透過 babel 來幫助）
  • Minify 或優化程式碼
  • 將 LESS 或 SCSS 轉換成 CSS
  • 使用 HMR（Hot Module Replacement）
  • 包含任何類型的檔案到你的 JavaScript
1
2
3
4
5
6
7
8

npm install -g webpack
npm install --save-dev webpack

# 每次 build 的時候查看改變的檔案
webpack --watch

# 使用自訂的 webpack 設定檔
webpack --config myconfig.js

Babel

Babel是一個廣泛使用的轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。

其他參考資料

Comments