讀vue原始碼看前端百態2--打包工具

Wendydesigner發表於2019-02-19
Vue原始碼前端

讀vue原始碼看前端百態2--打包工具

上圖是vue的package.json檔案。

除了vue, React, Ember, Preact, D3, Three.js, Moment, etc. 一些很有名的js庫,紛紛使用Rollup來作為打包工具，所以Rollup想必有它的優勢。除了rollup，當然還有一些大家耳熟能詳的打包自動化工具，比如webpack,gulp,grunt,lerna,這篇我們就來看一下他們的區別，以免書到用時方恨少！也是幫助我們在構建工程的時候使用合適的工具，當然會讓你事半功倍的～

Rollup

Rollup 是下一代 ES6 模組化工具，它最大的亮點是利用 ES6 模組設計，生成更簡潔、更簡單的程式碼。rollup更適合構建javascript庫。

rollup優勢

  • 自動 Tree-shaking(Tree-shaking, 也被稱為 "live code inclusion," 它是清除實際上並沒有在給定專案中使用的程式碼的過程，但是它可以更加高效。)
  • 打包速度快
  • 配置簡單

rollup使用

npm install rollup
使用配置檔案rollup.config.js

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};
複製程式碼

執行rollup -c rollup.config.js

簡介：

input：這個包的入口點 (例如：你的 main.js 或者 app.js 或者 index.js)
file： 要寫入的檔案。也可用於生成 sourcemaps，如果適用
format：關於format選項，rollup提供了五種選項:

* amd – 非同步模組定義，用於像RequireJS這樣的模組載入器
* cjs – CommonJS，適用於 Node 和 Browserify/Webpack
* es – 將軟體包儲存為ES模組檔案
* iife – 一個自動執行的功能，適合作為<script>標籤。（如果要為應用程式建立一個捆綁包，您可能想要使用它，因為它會使檔案大小變小。）
* umd – 通用模組定義，以amd，cjs 和 iife 為一體
複製程式碼

瞭解更多模組相關內容，移步我的第一篇文章讀vue原始碼看前端百態1--模組化

rollup基礎外掛

rollup-plugin-alias: 提供modules名稱的 alias 和 reslove 功能
rollup-plugin-babel: 提供babel能力
rollup-plugin-eslint: 提供eslint能力
rollup-plugin-node-resolve: 解析 node_modules 中的模組
rollup-plugin-commonjs: 轉換 CJS -> ESM, 通常配合上面一個外掛使用
rollup-plugin-serve: 類比 webpack-dev-server, 提供靜態伺服器能力
rollup-plugin-filesize: 顯示 bundle 檔案大小
rollup-plugin-uglify: 壓縮 bundle 檔案
rollup-plugin-replace: 類比 Webpack 的 DefinePlugin , 可在原始碼中通過process.env.NODE_ENV 用於構建區分 Development 與 Production 環境.
複製程式碼

學習更多rollup工具：www.rollupjs.com/guide/zh

Webpack

Webpack 的定位是模組打包器，rollup 還不支援一些特定的高階功能，尤其是用在構建一些應用程式的時候，特別是程式碼拆分和執行時態的動態匯入dynamic imports at runtime.如果你的專案中需要這些功能,則使用webpack更為適合。 segmentfault.com/img/bVVVqL?…

讀vue原始碼看前端百態2--打包工具
webpack是收把專案當作一個整體，通過一個給定的的主檔案，webpack將從這個檔案開始找到你的專案的所有依賴檔案，使用loaders處理它們，最後打包成一個或多個瀏覽器可識別的js檔案

webpack優勢

  • webpack 是以 commonJS 的形式來書寫指令碼滴，但對AMD/CMD 的支援也很全面，方便舊專案進行程式碼遷移
  • 所有靜態資源都可以被當成模組引用，而不僅僅是JS了
  • 開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉base64等
  • 擴充套件性強，外掛機制完善（非同步載入、單獨打包）

webpack使用

因為webpack功能非常強大，瞭解更多：webpack.docschina.org/concepts 如果想自己構建一個webpack專案，可以跟隨 segmentfault.com/a/119000001… 學習！這裡就不介紹了

webpack的配置檔案

配置檔案(webpack.config.js),每個專案下都必須配置有一個 webpack.config.js

entry 頁面入口檔案配置,它將是整個依賴關係的根
output 對應輸出項配置（即入口檔案最終要生成什麼名字的檔案、存放到哪裡）

loaders  
1、實現對不同格式的檔案的處理，比如說將scss轉換為css，或者typescript轉化為js
2、轉換這些檔案，從而使其能夠被新增到依賴圖中
loader是webpack最重要的部分之一，通過使用不同的Loader，我們能夠呼叫外部的指令碼或者工具，實現對不同格式檔案的處理，loader需要在webpack.config.js裡邊單獨用module進行配置

plugins 外掛項,loaders負責的是處理原始檔的如css、jsx，一次處理一個檔案。而plugins並不是直接操作單個檔案，它直接對整個構建過程起作用

Alias 專案遷移更方便
externals 使用場景是外部依賴不需要打包進bundle
複製程式碼

lerna

一種管理多packages javascript專案的方式。

  • 自動解決packages之間的依賴關係
  • 通過git 檢測檔案改動，自動釋出
  • 根據git 提交記錄，自動生成CHANGELOG

lerna使用

1. npm install lerna -g

2. 初始化一個lerna工程: mkdir lerna
cd lerna/
lerna init

會出現：
- packages(目錄)
- lerna.json(配置檔案)
- package.json(工程描述檔案)

3. 新增測試package包
cd packages/
mkdir modulea
cd modulea/
npm init -y

檔案目錄：
--packages
	--modulea
		package.json
--lerna.json
--package.json

4. 為modulea中的package.json新增依賴:
{
  "name": "modulea",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.6"
  }
}

5. 返回主目錄：
執行lerna bootstrap,會發現modulea中的vue依賴已經安裝上了

6.與git倉庫連線(以github為例)
github新建倉庫（根據github的教程）
本地連線遠端 （git remote add origin https://github.com/Wendydesigner/lerna.git）
提交程式碼 
git add .
git commit -m "first commit"
git rebase origin/master
git push origin master

7.在lerna.json中新增publish命令
{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "command": {
    "publish": {
      "message": "chore(release): publish %v"
    }
  }
}

8. 釋出包
lerna publish  在提示中可以選擇版本
可以發現lerna.json與modulea的package.json中的version保持一致；
並且工程中會記錄每次釋出的tag；

9.更新程式碼並提交遠端，可以繼續進行lerna publish


複製程式碼

這是最簡單的lerna的工作流了。但是lerna還有更多的功能等待你去發掘。 lerna有兩種工作模式,Independent mode和Fixed/Locked mode， lerna的預設模式是Fixed/Locked mode，在這種模式下，實際上lerna是把工程當作一個整體來對待。每次釋出packges，都是全量釋出，無論是否修改。但是在Independent mode下，lerna會配合Git，檢查檔案變動，只發布有改動的packge。

lerna最佳實踐

為了能夠使lerna發揮最大的作用，下面是一些特性。

  • 採用Independent模式
  • 根據Git提交資訊，自動生成changelog
  • eslint規則檢查
  • prettier自動格式化程式碼
  • 提交程式碼，程式碼檢查hook
  • 遵循semver版本規範

在開發這種工程的過程的，最為重要的一點就是規範。

gulp

Gulp 是基於“流”的自動化構建工具，採用程式碼優於配置的策略，更易於學習和使用。Webpack 的定位是模組打包器，而 Gulp/Grunt 屬於構建工具。Webpack 可以代替 Gulp/Grunt 的一些功能，但不是一個職能的工具，可以配合使用

grunt

Grunt 是一套前端自動化工具，幫助處理反覆重複的任務。一般用於：編譯，壓縮，合併檔案，簡單語法檢查等

因為webpack以及其外掛實現了Gulp/Grunt的很多基本功能，所以大多數工程也就更傾向於使用webpack了，而Gulp/Grunt被打入了冷宮。

綜上所述，每種提及的工具都有它的最佳實現，找到最合適的，便是最好的～

相關文章