Rollup使用指南

Rollup常用于构建JavaScript库。Rollup支持ES6模块导入导出语法,基于Tree-Shaking分析库中的无用代码,大大降低库的大小。

Rollup安装命令 - 陈帅华涂鸦

与安装Gulp不同,Gulp需要全局安装gulp-cli并且本地项目安装gulp的开发依赖。尤其是当我的项目增多之后,越来越觉得每一个项目中都要从npm安装一遍相同的开发依赖,真让人头大。Rollup只需要全局安装rollup命令即可在任何位置使用,除了必要的插件以外不需要在项目中安装其它rollup依赖。

输出类型

假设有两个在同一目录中的js文件,info.js和main.js,代码如下:

info.js

export default function(str){
  console.info(str)
}

main.js

import info from './info.js';
export default function(){
  info('Hi')
}

使用如下格式分别输出main.js文件:

1. Asynchronous module definition (AMD)

define(function () { 'use strict';
  function info(str){
    console.info(str);
  }
  function main(){
    info('Hi');
  }
  return main;
});

2. CommonJS (CJS)

'use strict';
function info(str){
  console.info(str);
}
function main(){
  info('Hi');
}
module.exports = main;

3. EcmaScript modules (ESM)

function info(str){
  console.info(str);
}
function main(){
  info('Hi');
}
export default main;

4. Immediately-Invoked Function Expression (IIFE)

var goma = (function () {
  'use strict';
  function info(str){
    console.info(str);
  }
  function main(){
    info('Hi');
  }
  return main;
}());

5. Universal Module Definition (UMD)

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.goma = factory());
}(this, function () { 'use strict';
  function info(str){
    console.info(str);
  }
  function main(){
    info('Hi');
  }
  return main;
}));

输出IIEF和UMD类型格式需要指定一个任意名称,可以作为暴露在全局中的变量,比如$或者d3等,这里我是用的是goma。

版权声明 » 自由转载-署名-非商用-相同方式共享

作者署名 » 陈帅华-探索技术艺术与国学之美

发布日期 » 2019年8月7日 星期三

我要留言