rollup10分钟入门

特色介绍

• Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码
• 支持ES6
• 支持Tree Shaking
• 可打包js库，也可管理App code
• 代码拆分和运行时态的动态导入，存在不足，推荐webpack
• 通过插件CommonJS 和 node-resolve ，支持将Commonjs 转为 ES模块
• 支持Typescript

使用

前提node已安装

node安装与卸载

rollup安装

• 全局安装

 npm install --global rollup # npm i rollup -g

• 本地安装

npm install rollup --save-dev # yarn -D add rollup

# npx 在npm中携带的
npx rollup -c

# 使用scripts配置
"scripts": {
   "build:dev" :" rollup -c"
 },

调用方式

• CI
• 本节重点
• js api
• rollup-starter-lib
• App 集成
• rollup-starter-app

打包方式

• 运行于浏览器

# compile to a <script> containing a self-executing function ('iife')
$ rollup main.js --file bundle.js --format iife

• node上运行

# compile to a CommonJS module ('cjs')
$ rollup main.js --file bundle.js --format cjs

• 都支持

# UMD format requires a bundle name
$ rollup main.js --file bundle.js --format umd --name "myBundle"

CI

输出到文件bundle.js

• js 文件

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

# foo.js
export default 'hello rollup'

• ci 打包

$ rollup main.js -o bundle.js -f cjs

添加配置文件控制打包

• rollup.config.js

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

• 打包

# --config 简写-c
rollup -c

# 指定不同配置
rollup -c rollup.config.dev.js
rollup -c rollup.config.prod.js

# 覆盖配置
rollup -c -o bundle-2.js -f iife

• 打包后bundle，是一个commonjs模块

'use strict';

var foo = 'hello rollup';

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

module.exports = main;

使用插件修改打包

• 安装插件

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

• 引入插件

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

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

• 修改代码

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

• 运行结果

'use strict';

var version = "1.0.0";

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

module.exports = main;

• 通过两次运行结果，可发现，只有使用到的代码，被打包--Tree Shaking

rollup.config.js配置

配置项列表

// rollup.config.js

export default { // can be an array (for multiple inputs)
  // core input options
  external,
  input, // required
  plugins,

  // advanced input options
  cache,
  inlineDynamicImports,
  manualChunks,
  onwarn,
  preserveModules,
  strictDeprecations,

  // danger zone
  acorn,
  acornInjectPlugins,
  context,
  moduleContext,
  preserveSymlinks,
  shimMissingExports,
  treeshake,

  // experimental
  experimentalCacheExpiry,
  perf,

  output: { // required (can be an array, for multiple outputs)
    // core output options
    dir,
    file,
    format, // required
    globals,
    name,
    plugins,

    // advanced output options
    assetFileNames,
    banner,
    chunkFileNames,
    compact,
    entryFileNames,
    extend,
    footer,
    hoistTransitiveImports,
    interop,
    intro,
    outro,
    paths,
    sourcemap,
    sourcemapExcludeSources,
    sourcemapFile,
    sourcemapPathTransform,

    // danger zone
    amd,
    esModule,
    exports,
    externalLiveBindings,
    freeze,
    indent,
    namespaceToStringTag,
    noConflict,
    preferConst,
    strict
  },

  watch: {
    chokidar,
    clearScreen,
    skipWrite,
    exclude,
    include
  }
};