讀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?…

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  
一、實現對不一樣格式的文件的處理，好比說將scss轉換爲css，或者typescript轉化爲js
二、轉換這些文件，從而使其可以被添加到依賴圖中
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被打入了冷宮。

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