昨天和大家一起完rollup的基本使用方式，今天將會和大家介紹rollup 的常用配置方式。

rollup常用配置

1. input
   文件進入點地址

2.output

output:{
    file: './rollup/index-es.js', // 输出文件
    format: 'es',  //  五种输出格式：amd /  es6 / iife / umd / cjs
    name:'A',  //當format為iife和umd時必須提供，將作為全局變量掛在window(瀏覽器環境)下：window.A=...
    sourcemap:true,  //生成bundle.map.js文件，方便调试
    banner: '// welcome to imooc.com',//標頭名稱
    footer: '// powered by sam'//footer名稱
}

這裡整理一下

• 指定生成的包的格式。以下之一：
• amd –異步模塊定義，與RequireJS等模塊加載器一起使用
• cjs- CommonJS的，適用於節點和其他捆紮機（別名：commonjs）
• es–將捆綁軟件保留為ES模塊文件，適用於其他捆綁軟件，並作為標籤包含在現代瀏覽器中（別名：esm，module）
• iife–一種自執行功能，適合作為標記包含在內。（如果要為應用程序創建捆綁包，則可能要使用它。）
• umd-通用模塊定義，工作方式amd，cjs以及iife所有在一個
• system-在SystemJS裝載機的原生格式（別名：systemjs）

3.external

external:['library name'] //告訴rollup不要將此lodash打包，而作為外部依賴

4. global

global:{
    'jquery':'$' //告诉rollup 全局变量$即是jquery
}

5.plugins

各種插件使用的配置

以上是rollup最常用的五種的配置，如果其他的特殊球的話可以參考這裡喔(https://rollupjs.org/guide/en/#big-list-of-options)

再來我們稍微介紹一下一個內建的路徑配置模組

path

• path模組是Node.js提供的用於處理檔案路徑的函式集合，也是我們在建構大型庫時非常常用到的方法。

我們可以通過以下方式引入該模塊：
var path = require ( "path" )

path使用的方法

1. path.normalize(p)

規範化路徑，注意'..'和'.'。

2. path.join([path1][, path2][, ...])

用於連接路徑。該方法的主要用途在於，會正確使用當前系統的路徑分隔符，Unix系統是"/"，Windows系統是""。

3. path.resolve([from ...], to)

將to參數解析為絕對路徑，給定的路徑的序列是從右往左被處理的，後面每個path被依次解析，直到構造完成一個絕對路徑。例如，給定的路徑片段的序列為：/foo、/bar、baz，則調用path.resolve('/foo',
'/bar', 'baz')會返回/bar/baz。

4. path.isAbsolute(path)

判斷參數path是否是絕對路徑。

5. path.relative(from, to)

用於將絕對路徑轉為相對路徑，返回從from 到to 的相對路徑（基於當前工作目錄）。

6. path.dirname(p)

返迴路徑中代表文件夾的部分，同Unix的dirname命令類似。

7. path.basename(p[, ext])

返迴路徑中的最後一部分。同Unix命令bashname類似。

8. path.extname(p)

返迴路徑中文件的後綴名，即路徑中最後一個'.'之後的部分。如果一個路徑中並不包含'.'或該路徑只包含一個'.'且這個'.'為路徑的第一個字符，則此命令返回空字符串。

9. path.parse(pathString)

返迴路徑字符串的對象。

10. path.format(pathObject)

從對像中返迴路徑字符串，和path.parse相反。

這裡附上使用path的配置範例

const path = require('path');

export default {
    input: './src/index.js',
    output: [{
        file: path.resolve(__dirname,'rollup/index-cjs.js'),//'./rollup/index-cjs.js',
        format: 'umd',
        banner: '// welcome to imooc.com',
        footer: '// powered by sam'
    }, {
        file: './rollup/index-es.js',
        format: 'es',
        banner: '// welcome to imooc.com',
        footer: '// powered by sam'
    }]
}

總結

除了基本的配置外 rollup還有特殊的API 滿足我們的特殊需求喔

參考資料

• rollup官網(https://rollupjs.org/guide/en/)
• 10分鐘快速入門rollup.js(https://www.itread01.com/qexxq.html)
• Rollup打包工具的使用（超詳細，超基礎，附代碼截圖超簡單）(https://juejin.im/post/6844904058394771470#heading-12)