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功能的兼容性问题。