rollup学习整理-1-api详解

RollUP 学习整理

源码

创建项目，安装 Rollup

    mkdir rollup-demo
    cd rollup-demo
    mkdir src  #创建源码目录
    npm init
    sudo npm install --save-dev rollup #安装Rollup

创建配置文件

项目根目录下，创建 rollup.config.js 配置文件

export default {
   input: './src/main.js', 
   output: { 
      file: './dist/js/bundle.js', 
      format: 'iife', 
      name: 'MyBundle', 
   },
   plugins: [], 
   externals: [], 
   globals: { 
      jquery: '$'
   },
   banner: 'const a = 6; console.log(a);', 
   footer: '/* this is footer */',
   intro: 'const a = 6;', 
   outro: '/* this is outro */',
   cache: true, 
   sourcemap: 'true', 
   strict: true, 
}

配置文件参数详解

1. input

项目入口

    input: './src/main.js', // 项目入口

2. output

项目输出配置

   output: { // 编译后文件
      file: './dist/js/bundle.js', // 打包后的路径
      format: 'iife', // 生成包的格式规范 包括 amd umd cjs es iife
      name: 'MyBundle', // 打包后的包名 iife / umd包 // -> var MyBundle = (function () {...
   },

3. plugins

插件项

  plugins: [
    resolve(),
    commonjs()
  ]

4. externals

外部引用 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖， 一般用于library开发，以下是官网的例子

  external: [
    'some-externally-required-library',
    path.resolve( './src/some-local-file-that-should-not-be-bundled.js' )
  ]

5. globals

全局模块 提供将外部模块ID转换为全局模块的功能

   globals: { // 全局模块 提供将外部模块ID转换为全局模块的功能
      jquery: '$'
   },

6. banner / footer

前置 / 追加 到文件束，最终添加到了生成包的外部，可以是代码也可以是注释

    banner: 'const a = 6; console.log(a);',
    footer: '/* this is footer */',

结果

    const a = 6; console.log(a); // banner
    (function () {
    'use strict';
    ...
    }());
    /* this is footer */ // footer

7. intro / outro

与banner / footer 差不多，但是内容最终添加到了生成包的内部

    intro: 'const a = 6;',
    outro: '/* this is outro */',

结果

  (function () {
  'use strict';

  const a = 6; // intro
  ...

  /* this is outro */ // outro

  }());

8. cache

缓存

    cache: true, // 缓存

9. sourcemap

• true: 会创建单独的 sourcemap 文件
• inline: sourcemap将作为数据URI附加到生成的output文件中。

    sourcemap: 'true',

10. strict

strict: true 严格模式，默认开启

相关文章

1. rollup学习整理-1-api详解
2. rollup学习整理-2-插件详解