Rollup打包工具的使用（超詳細，超基礎，附代碼截圖超簡單）

rollup（下一代ES模塊捆綁器）是什麼請查看官網介紹http://rollupjs.org/guide/en/

注意不要看Rollup.js 中文網，由於這是別人翻譯的，不是實時更新的，我以前看這個總是安裝出錯

以前在網絡上查找過相關的rollup使用，有些文章很概念不易理解，沒有具體步驟；有些文章步驟不夠詳細，沒有前因後果。因此打算整理個文章給後來者減小彎路。我保證此文真的是手把手教學，很接地氣，由於我是邊建工程邊使用邊寫文章，不是某個項目裏的代碼，因此代碼清晰，沒有冗餘。

爲何不用webpack

一說到打包工具你們都想到webpack，由於咱們用到的vue，react腳手架都是基於webpack的，他有各類loader，幫助咱們解決各類問題，這針對於開發項目是頗有效的，可是他生成代碼有不少是非咱們所寫的邏輯代碼, 好比一些他自有的模塊加載功能:

若是你要開發js庫，那webpack的繁瑣和打包後的文件體積就不太適用了。有需求就有工具，因此rollup的產生就是針對開發js庫的。

rollup生成代碼只是把咱們的代碼轉碼成目標js並沒有其餘,同時若是須要,他能夠同時幫咱們生成支持umd/commonjs/es的js代碼,vue/react/angular都在用他做爲打包工具。查看他們的官網代碼均可以看到rollup的影子。

快速入門

1.新建工程

新建一個空文件夾，好比rollupConfigDemo

2.安裝rollup

用vscode打開這個工程，執行命令安裝

cnpm install rollup --save-dev
複製代碼

執行後咱們發現項目自動生產了一些文件，並看到package包裏有了rollup。

添加gitignore，忽略不用上傳的文件

3.建立rollup.config.js

咱們也能夠不用配置文件直接用cli命令來打包，可是若是添加更多的選項，這種命令行的方式就顯得麻煩。爲此，咱們能夠建立配置文件來囊括所需的選項。配置文件由 JavaScript 寫成，比 CLI 更加靈活。（cli命令打包請看官網介紹）

4.編寫要打包的文件

1.新建src文件夾，並新建main.js(應用程序入口)

2.新建modules文件夾（表明模塊文件）

modules的做用的區分模塊和主入口，modules中可根據你本身的js庫設計文件目錄結構。

5.編寫package.json中的打包命令

6.執行npm run build 查看文件輸出結果

咱們看到輸出的結果十分的清晰，沒有像webpack那樣多餘的代碼

7.使用打包後的文件

打開這個網頁後咱們看到彈窗內容Hello from Rollup

深刻使用

1.使用Babel

爲了正確解析咱們的模塊並使其與舊版瀏覽器兼容，咱們應該包括babel來編譯輸出。許多開發人員在他們的項目中使用 Babel ，以便他們可使用未被瀏覽器和 Node.js 支持的未來版本的 JavaScript 特性。

1.1 安裝 rollup-plugin-babel

cnpm install rollup-plugin-babel --save-dev
複製代碼

1.2 配置rollup.config.js

1.3 添加Babel配置文件.babelrc

在src文件夾下添加.babelrc

這個設置有一些不尋常的地方。

首先，咱們設置 "modules": false ，不然 Babel 會在 Rollup 有機會作處理以前，將咱們的模塊轉成 CommonJS ，致使 Rollup 的一些處理失敗。

第二，咱們將 .babelrc 文件放在 src 中，而不是根目錄下。 這容許咱們對於不一樣的任務有不一樣的 .babelrc 配置，好比像測試，若是咱們之後須要的話 - 一般爲單獨的任務單獨配置會更好。

1.4 安裝@babel/core 和 @babel/preset-env

@babel/core是babel的核心，咱們看到babelrc配置了 preset env，因此要安裝這兩個插件

cnpm install @babel/core @babel/preset-env --save-dev
複製代碼

安裝後咱們看到package包內容

最後運行npm run build,咱們看到打包後出來的文件內容通過babel轉換後有es6語法變成了es5語法

2.node模塊的引用

在某些時候，您的項目可能取決於從NPM安裝到node_modules文件夾中的軟件包。 與Webpack和Browserify等其餘捆綁軟件不一樣，Rollup不知道如何``開箱即用''如何處理這些依賴項-咱們須要添加一些插件配置。

rollup.js編譯源碼中的模塊引用默認只支持 ES6+的模塊方式import/export。然而大量的npm模塊是基於CommonJS模塊方式，這就致使了大量 npm 模塊不能直接編譯使用。因此輔助rollup.js編譯支持 npm模塊和CommonJS模塊方式的插件就應運而生。

• rollup-plugin-node-resolve 插件容許咱們加載第三方模塊
• @rollup/plugin-commons 插件將它們轉換爲ES6版本

2.1 安裝@rollup/plugin-node-resolve和@rollup/plugin-commonjs

cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-dev
複製代碼

若是你安裝了rollup-plugin-commonjs，安裝後會提示

意思是說此包已被棄用，再也不維護。請使用@rollup/plugin commonjs.

若是你安裝了rollup-plugin-node-resolve可能也會遇到這個狀況，解決方案相似。英文官網裏都是用的@rollup/plugin-node-resolve和@rollup/plugin-commonjs

安裝後包內容爲

2.2 配置rollup.config.js

2.3 使用一個第三方庫lodash

cnpm install lodash --save-dev
複製代碼

打開src/main.js使用lodash

執行npm run build 後咱們看打包後的文件多了不少內容，這些代碼就是ladash的代碼，被咱們打包整合進來了。

打開網頁查看輸出內容

2.4 額外補充

若是你不想第三方庫被打包進來，而能夠在外面引入，配合使用的話，能夠在rollup.config.js中配置external

執行npm run build 後發現打包出來的內容變少了

而後頁面裏使用也稍做修改，script引入lodash，使用iife打包出來的文件（由於咱們這裏使用頁面引用的方式），查看頁面能夠正常輸出。

3.使用typescript

咱們在開發大型項目時，通常都會使用typescript來加強代碼的可維護性。因此在rollup中使用typescript也是必不可少的。

3.1 安裝@rollup/plugin-typescript

我以前使用的時候用的是rollup-plugin-typescript，今天寫這篇文章時發現此插件不維護更新了，模塊移植到了@rollup/plugin-typescript

cnpm install @rollup/plugin-typescript --save-dev
複製代碼

安裝後發現有報錯,提示咱們要安裝tslib和typescript

3.2 安裝tslib 和 typescript

cnpm install tslib typescript --save-dev
複製代碼

安裝好後咱們來看看package包內容

3.3 配置rollup.config.js

引入使用插件

3.4 配置tsconfig.json

若是不配置直接運行npm run build 會有提示讓咱們新建tsconfig配置

3.5 編寫ts文件

運行npm run build 後，查看頁面能正常解析和運行

4.壓縮代碼

爲了時代碼體積更小，咱們都會使用代碼壓縮插件

4.1 安裝rollup-plugin-terser

terser是什麼，它是適用於ES6 +的JavaScript解析器，mangler和壓縮器工具包

咱們比較熟悉的是uglify，由於咱們在webpack中使用過，rollup中也有rollup-plugin-uglify插件

咱們看到 注意：uglify-js只能翻譯es5語法。若是要轉譯es6+語法，請改用terser

因此咱們使用rollup-plugin-terser

cnpm install rollup-plugin-terser --save-dev
複製代碼

4.2 配置rollup.config.js

引入使用了terser後，咱們執行npm run buld,看看輸出結果

5.編譯css

開發項目咱們用webpack，開發js類庫，rollup比webpack強。開發js類庫通常是不寫css，若是你要寫大量的css，那可能你開發的是項目，優先選擇webpack，webpack裏也有開發library的配置。

若是你的js類庫裏仍是必不可少要寫些css的話，rollup也是有插件編譯css的

5.1 安裝rollup-plugin-postcss

cnpm install rollup-plugin-postcss --save-dev
複製代碼

5.2 配置rollup.config.js

引入postcss插件並使用，先註釋掉壓縮插件，讓咱們能看看打包出來的css會是什麼樣的。

5.3 編寫使用css

1.在src目錄下寫入style.css文件

2.main.js中寫入相關的css使用代碼

3.執行npm run build 查看打包後的文件內容。咱們看到css經過這塊代碼動態引入了

4.打開頁面查看html代碼

使用less等預編譯也是能夠的，若有須要，向我提問我再更新。

持續更新

github.com/rollup/plug…

github.com/rollup/awes…

這兩個rollup插件相關的插件地址，想要的功能來這找