Rollup(1): 安装 Rollup 以及 Rollup 和 Webpack 的区别

Rollup 介绍

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

Rollup中文网

安装 rollup

npm i rollup -g  

包管理器

// package.json
{
  "name": "rollup-gitbook",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -c",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

配置文件

新建 rollup.config.js

1. rollup 支持 es , umd , cjs , system , iife , amd
2. 其中 cjs 指的是 commonjs , iife 指的是 立即执行函数 , umd 指的是 cjs 和 amd 的 兼容模块

export default {
  input: './src/index.js',
  output: [
    {
      file: './dist/lib-umd.js',
      format: 'umd',
      name: 'myLib',
    },
    {
      file: './dist/lib-es.js',
      format: 'es',
    },
    {
      file: './dist/lib-cjs.js',
      format: 'cjs',
    },
    {
      file: './dist/lib-system.js',
      format: 'system',
    },
    {
      file: './dist/lib-iife.js',
      format: 'iife',
    },
    {
      file: './dist/lib-amd.js',
      format: 'amd',
    },
  ],
  // 插件配置在这里
  plugin:[]
};

入口程序

新建 src 下的 modules.js

// src/modules.js

const sayHelloRollup = () => {
  console.log('sayHello,Rollup');
};

export { sayHelloRollup };

新建 src 下的 index.js

import { sayHelloRollup } from './modules';

sayHelloRollup();

运行 npm run dev

这个时候我们就可以在 dist 文件夹下看到各种打包好的文件了

这时候看看区别

// lib-amd.js amd
define((function () { 'use strict';

  const sayHelloRollup = () => {
    console.log('sayHello,Rollup');
  };

  sayHelloRollup();

}));

// lib-cjs.js  commonjs
'use strict';

const sayHelloRollup = () => {
  console.log('sayHello,Rollup');
};

sayHelloRollup();

// lib-es.js es
const sayHelloRollup = () => {
  console.log('sayHello,Rollup');
};

sayHelloRollup();

// lib-iife.js
// iife 写法 
(function () {
  'use strict';

  const sayHelloRollup = () => {
    console.log('sayHello,Rollup');
  };

  sayHelloRollup();

})();

// lib-system.js
System.register([], (function () {
  'use strict';
  return {
    execute: (function () {

      const sayHelloRollup = () => {
        console.log('sayHello,Rollup');
      };

      sayHelloRollup();

    })
  };
}));

// lib-umd.js
(function (factory) {
  typeof define === 'function' && define.amd ? define(factory) :
  factory();
})((function () { 'use strict';

  const sayHelloRollup = () => {
    console.log('sayHello,Rollup');
  };

  sayHelloRollup();
}));

项目具体路径

这里说下 webpack 和 rollup 的区别

1. webpack 由于年代相对久远，在 commonjs 后且 esMoudles 之前,所以通过 webpack 通过自己来实现 commonjs 等语法，rollup 则可以通过配置打包成想要的语法，比如 esMoudles

这里看看 webpack 打包

// 看看代码中的define.amd 是不是有种 umd 那味了
!function(e,_){"object"==typeof exports&&"object"==typeof module?module.exports=_():"function"==typeof define&&define.amd?define([],_)
:"object"==typeof exports?exports.main=_():e.main=_()}(self,
(function(){return function(){"use strict";var __webpack_modules__={"./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/vue/ElButton.vue?vue&type=script&lang=js&":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'el-button',\n  props: {\n    type: {\n      type: String,\n      default: function _default() {\n        return 'primary';\n      }\n    },\n    disabled: {\n      type: String\n    }\n  },\n  data: function data() {\n    return {};\n  }\n});\n\n//# sourceURL=webpack://webpack_project/./src/vue/ElButton.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options")},"./src/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__)... 
// 剩下就没截图了

2. 所以说 rollup 很适合打包成 库，而 webpack 比较适合用来做来打包应用

3. 由于rollup不能够直接读取node_modules中的依赖项，需要引入加载npm模块的插件：rollup-plugin-node-resolve

4. 由于rollup默认只支持esm模块打包，所以需要引入插件来支持cjs模块：rollup-plugin-commonjs

5. 由于 rollup 通过可以 esm 模块开发和打包，所以支持 tree-shaking 模式

6. vite 就是 rollup 开发而来的

插件

1. rollup 并没有 webpack 的 loader , 只在 rollup-config.js 中配置 plugin:[] 的选项就可以了

2. 关于插件之后主要讲下 rollup-plugin-common.js 和 rollup-plugin-node-resolve 以及 vue 相关 plugin

关于 rollup-plugin-babel (es6语法兼容) 和 rollup-plugin-terser (代码压缩) 这里就不赘述了。

rollup-plugin-babel 的 github

rollup-plugin-terser 的 github

参考

1. Vite 源码学习】2. Vite构建工具为什么用Rollup
2. rollup从入门到打包一个按需加载的组件库