自动化构建工具（四）Pollup

一、使用Rollup创建第一个打包Demo

1.1 安装Rollup

npm install rollup --global

1.2 创建项目

mkdir my-rollup-project/src cd my-rollup-project

src/main.js

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

src/foo.js

export default 'hello world!';

1.3 创建 bundle

rollup src/main.js -o bundle.js -f cjs

1.4 结果

二、使用Rollup的配置文件rollup.config.js，从而减少打包步骤

2.1在项目中创建一个名为 rollup.config.js 的文件，增加如下代码：

// rollup.config.js export default { input: 'src/main.js', output: { file: 'bundle.js', format: 'cjs' } };

我们用 --config 或 -c 来使用配置文件：

rm bundle.js # so we can check the command works! rollup -c

三、使用插件(Using plugins)：json插件，rollup-plugin-json

3.1 安装依赖

npm install --save-dev rollup-plugin-json

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

// src/main.js import { version } from '../package.json'; export default function () { console.log('version ' + version); }

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

// rollup.config.js import json from 'rollup-plugin-json'; export default { input: 'src/main.js', output: { file: 'bundle.js', format: 'cjs' }, plugins: [ json() ] };

3.4 package.json修改

3.5 运行

3.6 结果

四、命令行

五、Rollup 与其他工具集成

具体操作看官网