終於來到了第十八天，今天將是我們重頭戲的開始，大家可以先開啟我們昨天的檔案喔。
稍後會用rollup打包同一個檔案，可以自行將打包出來的代碼跟昨天的進行比對喔!!

接下來我們就直接一步一步開始使用rollup了

1.先開啟我們昨天的檔案， 安裝全域rollup到項目中(沒有全域的話沒有辦法再終端機輸入rollup喔)

npm i rollup -g

2. 先輸入rollup src/index.js -f es //-f 引數是 --format 的縮寫，它表示生成程式碼的模塊化格式(ex:ES module,CommonJs,AMD...，前面有很詳細的介紹過喔)
   可以得到

src/index.js → stdout...
const arrowFunction = () => {
    console.log('hello');
};

arrowFunction();

再來到終端機輸入

rollup src/index.js -f es -o rollupJs/bundle.js  //-o指定了輸出的路徑，這裡我們將打包後的檔案輸出到rollup目錄下的bundle.js

src/index.js → rollupJs/bundle.js...
created rollupJs/bundle.js in 368ms

再來這是我們打包後的模組

const arrowFunction = () => {
    console.log('hello');
};

arrowFunction();

4. 接下來我們來設置rollup.config.js並開始使用吧，設置方式很像webpack

export default {
    input: './src/index.js',   //進入點
    output: [{
    file: './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'
    }]
}

5. 通過 rollup -c 指令進行打包，rollup.js會自動尋找名稱為rollup.config.js的配置檔案，並且編譯打包

• 打包結果如下，有沒有輝長的乾淨呢

// welcome to imooc.com
(function (factory) {
    typeof define === 'function' && define.amd ? define(factory) :
    factory();
}((function () { 'use strict';

    const arrowFunction = () => {
        console.log('hello');
    };

    arrowFunction();

})));
// powered by sam

測試玩了webpack 和 rollup的差異

結論

今天稍微介紹了webpack與rollup的差異，明天將會針對rollup的配置放式，與rollup的API進行介紹

參考資料

• rollup官網(https://rollupjs.org/guide/en/)
• 10分鐘快速入門rollup.js(https://www.itread01.com/qexxq.html)
• 教程：如何通过 Rollup 来打包 JavaScript(https://www.zcfy.cc/article/how-to-bundle-javascript-with-rollup-step-by-step-tutorial)