Rollup+Babel 組合，打造現代化的前端開發環境

一、Rollup簡介

Rollup是一款新的JavaScript模塊打包器。它與類似Webpack、Browserify等打包器有很大的不同。Rollup的特點是它可以將我們的源代碼按照ES6語法規範打包成現代化的JavaScript代碼。它使用ES6模塊語法作為默認輸入和輸出格式，這也正適合與ES6語法規範下的代碼編寫相匹配。

相較於Webpack，Rollup支持 tree-shaking，這也使得Rollup成為當下JS打包器中最容易實現tree-shaking方法而成為熱門工具。Rollup通過精細的靜態分析可以清楚的了解我們的程序中哪些部分沒有用到，然後將這部分統統從bundle中刪除。

這一點讓Rollup 比其他打包器更適合於打包庫和工具。

二、Babel簡介

Babel是Javascript編譯器，主要用於將ES6/7/8/9語法規範的JS代碼編譯為瀏覽器能夠兼容的ES5語法規範的JS代碼。Babel目前已經成為了Javascript編譯的主流工具。

Babel的核心原理是將新語法規範的代碼轉換為在目標環境（如瀏覽器）中可以直接使用的代碼，通過這個過程，開發者就可以用新的語法規範寫代碼，而讓Babel來處理語法轉換生成成為傳統Javascript語法或者目前瀏覽器可以直接使用的代碼。

Babel也支持插件機制、或者說它本質上就是一個插件機制驅動的編譯器。我們可以通過安裝各種各樣的插件來進行不同類型的編譯工作，比如轉換JSX、處理ES6模塊、處理裝飾器等等，這也使得Babel具有了極強的定製性與可擴展性。

三、Rollup+babel解決方案

對於那些使用了新型語法規範的項目，或是想使用最新API開發的開發者來說，Babel與Rollup聯合使用是個極好的解決方案。
讓我們結合實例來看看如何利用Rollup+Babel來進行javascript編譯。

  
    import resolve from "@rollup/plugin-node-resolve";
    import babel from "@rollup/plugin-babel";
    import commonjs from "@rollup/plugin-commonjs";
    import { terser } from "rollup-plugin-terser";
  
    const input = "src/index.js";
  
    export default [
      {
        input,
        output: {
           file: "bundle.js",
           format: "cjs",
        },
        plugins: [
          resolve({
            browser: true,
          }),
          commonjs(),
          babel({
            babelHelpers: "bundled",
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: {
                    node: "current",
                  },
                },
              ],
            ],
          }),
          terser(), // 壓縮代碼，生產環境推薦啟用
        ],
        external: ["fs", "path"],
      },
    ];
  

四、實現優化打包

通過Rollup+Babel組合，我們可以輕鬆地實現優化打包操作。利用code splitting和dynamic imports可以實現更快速和更小的加載時間。
另外，在具有許多頁面和組件的大型Web應用程序中，使用Tree-shaking可以消除未使用的代碼，從而減小最終生成bundle的體積。

  
    import { rollup } from "rollup";
    import { terser } from "rollup-plugin-terser";
    import commonJS from "@rollup/plugin-commonjs";
    import resolve from "@rollup/plugin-node-resolve";
    import replace from "@rollup/plugin-replace";
  
    async function build(inputOptions, outputOptions) {
      // create a bundle
      const bundle = await rollup(inputOptions);
  
      // generate code and a sourcemap
      const { output } = await bundle.generate(outputOptions);
      for (const chunkOrAsset of output) {
        if (chunkOrAsset.type === "asset") {
          console.log("Asset", chunkOrAsset);
        } else {
          console.log("Chunk", chunkOrAsset.modules);
        }
      }
  
      // generate a single entry point of consuming an IIFE (nearly the same as commonjs)
      await bundle.write(outputOptions);
    }
  
    export default [
      {
        input: "src/main.js",
        output: {
          file: "dist/main.min.js",
          format: "iife",
          name: "GLOBAL",
        },
        plugins: [
          replace({
            "process.env.NODE_ENV": JSON.stringify("production"),
          }),
          commonJS(),
          resolve(),
          terser({
            ecma: 8,
          }),
        ],
      },
    ].map((config) => build(config));
  

五、結語

Rollup與Babel的組合是建立現代化JavaScript環境的重要工具。這兩個工具都有獨特的功能和優點，能夠快速生成並優化代碼，使得代碼更易維護、開發更高效。通過使用Rollup和Babel，開發者們可以專註於各自項目的需求和細節，而不必擔心與現代JavaScript功能的兼容性問題。