自动化构建工具（四）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 与其他工具集成

具体操作看官网