Rollup的基本使用

rollup.js是一个模块打包工具，可以使项目从一个入口文件开始，将所有使用到的模块文件都打包到一个最终的发布文件中，Rollup极其适合构建一个工具库，Vue.js源码就是通过Rollup打包构建的。

描述

rollup对代码模块使用新的标准化格式，这些标准都包含在JavaScript的ES6版本中，而不是以前的特殊解决方案，如CommonJS和AMD等，也就是说rollup使用ES6的模块标准，这意味着我们可以直接使用import和export而不需要引入babel，当然，在现在的项目中，babel可以说是必用的工具，此外rollup实现了另一个重要特性叫做tree-shaking，这个特性可以帮助你将无用代码，即没有使用到的代码自动去掉，这个特性是基于ES6模块的静态分析的，也就是说，只有export而没有import的变量是不会被打包到最终代码中的。

示例

我的一个小油猴插件就是通过rollup打包的，GreasyFork地址为https://greasyfork.org/zh-CN/scripts/405130，全部源码地址为https://github.com/WindrunnerMax/TKScript，使用npm run build即可打包构建，package.json文件与rollup.config.js文件配置如下。

{
  "name": "TKScript",
  "version": "1.0.0",
  "description": "Tampermonkey",
  "scripts": {
    "build": "rollup -c"
  },
  "author": "Czy",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "install": "^0.13.0",
    "npm": "^6.14.5",
    "rollup": "^2.18.2",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-postcss": "^3.1.2",
    "rollup-plugin-uglify": "^6.0.4",
    "rollup-plugin-userscript-metablock": "^0.2.5"
  }
}

import postcss from "rollup-plugin-postcss";
import babel from "rollup-plugin-babel";
// import { uglify } from "rollup-plugin-uglify";
import metablock from "rollup-plugin-userscript-metablock";

const config = {
    postcss: {
        minimize: true,
        extensions: [".css"],
    },
    babel: {
        exclude: ["node_modules/**"],
        presets: [
            [
                "@babel/env", {
                    modules: false,
                    targets: "last 2 versions, ie >= 10"
                }
            ]
        ]
    },

}

export default [{
    input: "./src/copy/src/index.js",
    output: {
        file: "./dist/copy.js",
        format: "iife",
        name: "copyModule"
    },
    plugins: [
        postcss(config.postcss),
        babel(config.babel),
        // uglify(),
        metablock({
            file: "./src/copy/meta.json"
        })
    ]
},{
    input: "./src/site-director/src/index.js",
    output: {
        file: "./dist/site-director.js",
        format: "iife",
        name: "linkModule"
    },
    plugins: [
        postcss(config.postcss),
        babel(config.babel),
        // uglify(),
        metablock({
            file: "./src/site-director/meta.json"
        })
    ]
}];

使用方法

安装

全局安装: npm install rollup -g。
项目安装: npm install rollup --save-dev、yarn add rollup -D。

命令行工具

-i, --input <filename>: 要打包的文件(必须)。
-o, --file <output>: 输出的文件(如果没有这个参数，则直接输出到控制台)。
-f, --format <format>: 输出的文件类型。
- amd: 异步模块定义，用于像RequestJS这样的模块加载器。
- cjs: CommonJS, 适用于Node或Browserify/webpack。
- es: 将软件包保存为ES模块文件。
- iife: 一个自动执行的功能，适合作为script标签这样的，只能在浏览器中运行。
- umd: 通用模块定义，以amd、cjs和iife为一体。
- system: SystemJS加载器格式。
-e, --external <ids>: 将模块ID的逗号分隔列表排除。
-g, --globals <pairs>: 以moduleID:Global键值对的形式，用逗号分隔开任何定义在这里模块ID定义添加到外部依赖。
-n, --name <name>: 生成UMD模块的名字。
-m, --sourcemap: 生成sourcemap。
--amd.id: AMD模块的ID，默认是个匿名函数。
--amd.define: 使用Function来代替define。
--no-strict: 在生成的包中省略use strict;。
--no-conflict: 对于UMD模块来说，给全局变量生成一个无冲突的方法。
--intro: 在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容。
--outro: 在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容。
--banner: 在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容。
--footer: 在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容。
--interop: 包含公共的模块(这个选项是默认添加的)。
-w, --watch: 监听源文件是否有改动，如果有改动，重新打包。
--silent: 不要将警告打印到控制台。
-h, --help: 输出帮助信息。
-v, --version 输出版本信息。

配置文件

// rollup.config.js
export default {
  // 核心选项
  input,     // 必须
  external,
  plugins,

  // 额外选项
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file,    // 必须
    format,  // 必须
    name,
    globals,

    // 额外选项
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,
    sourcemapFile,
    interop,

    // 高危选项
    exports,
    amd,
    indent
    strict
  },
};

input

input、rollup -i,--input，打包入口文件路径，参数类型为String | String [] | { [entryName: string]: string }。
使用数组或者字符串作为选项值的时候的时候，默认使用的是文件的原始名称，作为文件的basename，可以在output:entryFileNames = entry-[name].js配置选项作为[name]动态参数传递进去。

input: "./src/index.js";
input: ["./src/index.js", "./other/index.js"];

用键值对{key: value}的选项值作为参数，使用的对象的键作为文件的basename，用来在output:entryFileNames配置选项作为[name]动态参数传递进去。

input: { main: "./src/index.js", vendor: "./other/index.js" }

external

external、rollup -e,--external，维持包文件指定id文件维持外链，不参与打包构建参数类型为String[] | (id: string, parentId: string, isResolved: boolean) => boolean。

当format类型为iife或者umd格式的时候需要配置output.globals选项参数以提供全局变量名来替换外部导入。
当external是一个函数的时候，各个参数代表的含义分别是: id，所有导入的文件id，即import访问的路径；parent，import所在的文件绝对路径；isResolved，表示文件id是否已通过插件处理过。

{
  // ...,
  external: [ 
      'some-externally-required-library',  
      'another-externally-required-library'
  ]
}
// or 
{
  // ...,
  external: (id, parent, isResolved) => {
    return true; 
  }
}

plugins

可以提供rollup很多插件选项，参数类型为Plugin | (Plugin | void)[]。

{
  // ...,
  plugins: [
      resolve(), 
      commonjs()， 
      isProduction && (await import("rollup-plugin-terser")).terser()
 ]
}

onwarn

拦截警告信息，如果没有提供，警告将被复制并打印到控制台，警告是至少有一个code和message属性的对象，我们可以控制如何处理不同类型的警告。

onwarn (warning) {
  // 跳过某些警告
  if (warning.code === 'UNUSED_EXTERNAL_IMPORT') return;

  // 抛出异常
  if (warning.code === 'NON_EXISTENT_EXPORT') throw new Error(warning.message);

  // 控制台打印一切警告
  console.warn(warning.message);
}

许多警告也有一个loc属性和一个frame，可以定位到警告的来源。

onwarn ({ loc, frame, message }) {
  // 打印位置（如果适用）
  if (loc) {
    console.warn(`${loc.file} (${loc.line}:${loc.column}) ${message}`);
    if (frame) console.warn(frame);
  } else {
    console.warn(message);
  }
}

acorn

这是danger zone，修改rollup解析js配置，rollup内部使用的acorn库解析js, acorn库提供了解析js的相关配置api，一般很少需要修改。在下面这个例子中，这个acorn-jsx插件和使用babel并不是同一个意思，这个插件的左右是让acornjs解析器能认识jsx语法，经过rollup打包后展示的还是jsx语法，而babel会直接修改jsx结构成为普通js语法。

import jsx from "acorn-jsx";

export default {
  // ...
  acornInjectPlugins: [
      jsx()
  ]
};

context

默认情况下，模块的上下文，即顶级的this的值为undefined，在极少数情况下，可能需要将其更改为其他内容，例如window。

moduleContext

和context一样，但是每个模块可以是id:context对的对象，也可以是id=>context函数。

legacy

为了增加对诸如IE8之类的旧版环境的支持，通过剥离更多可能无法正常工作的现代化的代码，其代价是偏离ES6模块环境所需的精确规范。

output

output是输出文件的统一配置入口, 包含很多可配置选项参数类型为Object | Array，单个输出为一个对象，要输出多个，可以是一个数组。

output.file

output.file、rollup -o,--file，必填，对于单个文件打包可以使用该选项指定打包内容写入带路径的文件，参数类型为String。

output: {
    file: "./dist/index.js" 
}

output.format

output.format、rollup -f,--format，必填，打包格式类型，配置可选项有amd、cjs、es、iife、umd、system，选项说明同命令行配置选项，参数类型为String。

output: { 
    format: "iife"
}

output.name

output.format，rollup -f,--format生成包名称，参数类型为String。

export default {
  // ...,
  output: {
    name: "bundle"
  }
};

output.globals

output.globals，rollup -g,--globals，配合配置external选项指定的外链在umd和iife文件类型下提供的全局访问变量名参数类型，参数类型为{ [id: String]: String } | ((id: String) => String)。

export default {
  // ...,
  globals: {
    jquery: "$"
  }
};

output.paths

它获取一个ID并返回一个路径，或者id: path对的Object，在提供的位置，这些路径将被用于生成的包而不是模块ID，从而允许从CDN加载依赖关系。

// app.js
import { selectAll } from 'd3';
selectAll('p').style('color', 'purple');
// ...

// rollup.config.js
export default {
  input: 'app.js',
  external: ['d3'],
  output: {
    file: 'bundle.js',
    format: 'amd',
    paths: {
      d3: 'https://d3js.org/d3.v4.min'
    }
  }
};

// bundle.js
define(['https://d3js.org/d3.v4.min'], function (d3) {

  d3.selectAll('p').style('color', 'purple');
  // ...

});

output.banner

字符串前置到文件束bundle，banner选项不会破坏sourcemaps，参数类型为String。

export default {
  // ...,
  output: {
      banner: "/* library version " + version + " */",
  }
};

output.footer

字符串前置到文件束bundle，footer选项不会破坏sourcemaps，参数类型为String。

export default {
  // ...,
  output: {
      footer: "/* follow me on Github! */",
  }
};

output.intro

类似于output.banner，如果说banner和footer是在文件开始和结尾添加字符串，那么intro和outro就是在被打包的代码开头和结尾添加字符串了。

export default {
  // ...,
  output: {
      intro: "/* library version " + version + " */",
  }
};

output.outro

类似于output.footer，如果说banner和footer是在文件开始和结尾添加字符串，那么intro和outro就是在被打包的代码开头和结尾添加字符串了。

export default {
  // ...,
  outro: {
      footer: "/* follow me on Github! */",
  }
};

output.sourcemap

sourcemap、rollup -m,--sourcemap, --no-sourcemap，如果true，将创建一个单独的sourcemap文件，如果inline, sourcemap将作为数据URI附加到生成的output文件中。

output.sourcemapFile

生成的包的位置，如果这是一个绝对路径，sourcemap中的所有源代码路径都将相对于它，map.file属性是sourcemapFile的基本名称basename，因为sourcemap的位置被假定为与bundle相邻，如果指定output，sourcemapFile不是必需的，在这种情况下，将通过给bundle输出文件添加.map后缀来推断输出文件名，一般应用场景很少，在特殊场景需要改变sourcemap的指向文件地址时才会用到。

output.interop

是否添加interop块，默认情况下interop: true，为了安全起见，如果需要区分默认和命名导出，则rollup会将任何外部依赖项default导出到一个单独的变量，这通常只适用于您的外部依赖关系，例如与Babel，如果确定不需要它，则可以使用interop: false来节省几个字节。

output.exports

使用什么导出模式，默认为auto，它根据entry模块导出的内容猜测你的意图。

default: 如果使用export default...仅仅导出一个文件，那适合用这个。
named: 如果导出多个文件，适合用这个。
none: 如果不导出任何内容，例如正在构建应用程序，而不是库，则适合用这个。

output.amd

打包amd模块相关定义。

amd.id: 用于AMD/UMD软件包的ID。
amd.define: 要使用的函数名称，而不是define。

output.indent

是要使用的缩进字符串，对于需要缩进代码的格式amd、iife、umd，也可以是false无缩进或true默认自动缩进。

output.strict

true或false，默认为true，是否在生成的非ES6软件包的顶部包含usestrict pragma，严格来说ES6模块始终都是严格模式，所以应该没有很好的理由来禁用它。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.rollupjs.com/
https://segmentfault.com/a/1190000010628352
https://github.com/JohnApache/rollup-usage-doc

posted @ 2021-02-20 19:43 WindrunnerMax 阅读(1868) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

WindrunnerMax

Rollup的基本使用

Rollup的基本使用

描述

示例

使用方法

安装

命令行工具

配置文件

input

external

plugins

onwarn

acorn

context

moduleContext

legacy

output

output.file

output.format

output.name

output.globals

output.paths

output.banner

output.footer

output.intro

output.outro

output.sourcemap

output.sourcemapFile

output.interop

output.exports

output.amd

output.indent

output.strict

每日一题

参考

公告