Skip to main content

rollup

中文文档

一、使用​

1. 常用插件​

  • rollup-plugin-serve
  • @rollup/plugin-node-resolve
  • rollup-plugin-filesize
  • rollup-plugin-uglify
    caution

    peer rollup@">=0.66.0 <2" from rollup-plugin-uglify@6.0.4

    tip

    使用rollup-plugin-terser替代

  • rollup-plugin-terser
  • rollup-plugin-livereload
  • rollup-plugin-vue vue2.x使用5.x版本 vue3使用6.x版本
  • vue-template-compiler
  • postcss rollup-plugin-postcss
  • @rollup/plugin-commonjs
  • @rollup/plugin-babel @babel/core @babel/plugin-transform-runtime

2. 配置文件​

output.exports​

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

  • default – 如果你使用 export default ... 仅仅导出一个东西，那适合用这个
  • named – 如果你导出多个东西，适合用这个
  • none – 如果你不导出任何内容 (例如，你正在构建应用程序，而不是库)，则适合用这个

default 和 named之间的区别会影响其他人如何使用文件束(bundle)。如果您使用default，则CommonJS用户可以执行此操作

output.dir​

该选项用于指定所有生成的 chunk 被放置在哪个目录中。如果生成一个以上的 chunk，那么这个选项是必需的。否则，可以使用 output.file 选项来代替。

output.globals​

该选项用于在 umd 或 iife bundle 中，使用 id: variableName 键值对指定外部依赖。例如，在这样的情况下：import $ from 'jquery';，我们需要告诉 Rollup jquery 是外部依赖，jquery 模块的 ID 为全局变量 $：

rollup.config.js
// rollup.config.js
export default {
  ...,
  external: ['jquery'],
  output: {
    format: 'iife',
    name: 'MyBundle',
    globals: {
      jquery: '$'
    }
  }
};

使用：

var MyBundle = (function ($) {
  // 这里编辑代码
}($));

二、基于vue的组件rollup打包​

1. vue-sfc-rollup​

tip

vue-sfc-rollup

  • 1）使用

    • npx vue-sfc-rollup
    Then...
    # Fill in prompts

    # Navigate to library folder
    cd path/to/my-component-or-lib
    npm install

    # Do dev stuff
    npm run serve

    # Run build process
    npm run build

    # Ready to publish!

  • 2）遇到的问题

    • a）写了多个sfc，使用时import多个但只能注册一个。解决方案：修改rollup.config.js中input为'src/entry.esm.js'的output的exports，由exports: 'named'改为exports: 'auto'。参考：rollup-output-exports

2. 自己搭建遇到的问题​

  • Error: Invalid value "umd" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

    使用AMD。参考Rollup完全讲解

  • vue.runtime.esm.js:345 Uncaught ReferenceError: process is not defined

    使用@rollup/plugin-replace解决

import replace from '@rollup/plugin-replace';

plugins: [
  vue(),
  replace({
    'process.env.NODE_ENV': JSON.stringify('development'),
    'process.env.VUE_ENV': JSON.stringify('browser')
  }),
  resolve(),
  babel()
],

  • [Vue warn]: Failed to mount component: template or render function not defined.

    发现.vue文件视图部分没用<template>包裹

  • Uncaught TypeError: Cannot read properties of undefined (reading 'install') at Vue.use

    Vue.use(ElementUI)报的错，原因是rollup配置文件设置了external: ['element-ui',]，不排除element-ui就不报错了

note

参考：

二、基于react17的组件rollup打包​