rollup

概述

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

使用

1.先建立文件夹并进入到文件夹中，命名为：rollup-project

mkdir rollup-project && cd rollup-project

2.初始化

npm init -y 或者 yarn init -y

3.安装rollup

yarn add rollup 或者 npm install rollup

4.使用rollup 首先，我们需要个入口。将以下代码粘贴到新建的文件 src/main.js 中：

// src/index.js
import foo from './foo.js';\
export default function () {\
console.log(foo);\
}

之后创建入口文件引用的 foo.js 模块：

// src/foo.js
export default 'rollup-foo'

现在可以创建 bundle 了：(主要使用config配置)

建立rollup.config.js文件,然后配置

export default {
  // 入口文件
  input: 'src/index.js',
  // 输出文件
  output: {
     file: 'out/bundle.js', // 输出的文件目录
     format: "cjs"
  }
}

然后在packjson中的添加

"scripts": {
    "build": "rollup --config"
  },

执行命令

yarn build 或者 npm run uild

最后可以在文件中可以看到多出一个文件夹out,还有一个文件bundle.js
可以看到bundle.js,打包出来的就是cjs(commonJS)的内容

'use strict';

var foo = 'rollup-foo';

function index () {
  console.log(foo);
}

module.exports = index;

目前为止, 我们已经用 Rollup 完成了第一个 bundle

插件使用

在这里使用官方教程举例的插件rollup-plugin-json,令 Rollup 从 JSON 文件中读取数据令 Rollup 从 JSON 文件中读取数据

npm install rollup-plugin-json -D 或者 yarn add rollup-plugin-json -D

更新 src/index.js 文件，从 package.json 而非 src/foo.js 中读取数据：

// src/index.js
import { version } from '../package.json';

export default function () {
  console.log('version ' + version);
}

编辑 rollup.config.js 文件，加入 JSON 插件：

// rollup.config.js
import json from 'rollup-plugin-json';

export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [ json() ]
};

执行打包命令yarn build 或者 npm run build, 结果如下

'use strict';

var version = "1.0.0";

var main = function () {
  console.log('version ' + version);
};

module.exports = main;

（注意只有我们实际需要的数据——name 和 devDependencies 和 package.json 中的其它数据被忽略了。这是 tree-shaking 起了作用。）

配置项参考
 本文参考

模块打包器之rollup入门篇

rollup

概述

使用

插件使用