rollupjs 快速入门

默认使用 ES 模块规范。目前rollup暂未支持一些特定高级功能，如果需要代码拆分和运行时态的动态导入 dynamic imports时，可能 webpack 更合适。

rollup 使用有两种方式：

命令行方式。如 rollup main.js --file bundle.js --format umd --name "myBundle"
配置文件方式（rollup.config.js）。如 rollup --config rollup.config.js

Rollup 将会在配置文件被依赖之前，在后台将配置文件和 CommonJS 的相关依赖项进行转译和打包。如果你想要使用 require 和 module.exports 将配置文件写成一个 CommonJS 模块，则应该将文件扩展名更改为 .cjs；如果你使用的是 Node 13+ 或 package.json 具有 type: "module" 字段，则将文件扩展名更改为 .mjs 也可以阻止 Rollup 进行编译，并将文件导入为 ES 模块。

配置文件

如果代码有依赖与 npm 包，则需要安装 @rollup/plugin-node-resolve 插件，因为 rollup 并不支持直接打包 node_modules 的依赖的。
@rollup/plugin-commonjs 插件用于识别依赖的 commonjs 语法，转换为 es 模块语法供给 rollup 处理。

javascript

// rollup.config.js
export default {
  // 核心选项
  input, // {string} 入口文件，必须
  external, // {array|function} 指出应将哪些模块视为外部模块，即忽略打包。如：['lodash'] 或 id => /lodash/.test(id) 返回true
  plugins, // {object|array} 插件

  // 额外选项
  onwarn,
  cache, // 缓存

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file, // {string} 输出文件，必须
    format,  // {string} 生成包的格式，必须；如：amd（异步模块），cjs（commonjs），esm（es 模块），iife（自动执行，适用于script标签），umd（通用）
    name, // {string} 包名称，iife/umd 时需要
    globals, // {object} 全局模块，id:name 键值对形式，用于umd/iife包，如：{jquery: '$'}，全局变量React
    plugins, // {object|array} 插件

    // 额外选项
    paths, // {{ [id: string]: string } | ((id: string) => string)} 该选项用于将外部依赖映射为路径
    banner, // {string} 字符串以 前置追加 到文件束
    footer, // {string} 字符串以 后置追加 到文件束
    intro, // 类似 output.banner
    outro, // 类似 output.footer
    sourcemap, // {boolean | 'inline' | 'hidden'} 代码映射
    sourcemapFile, // {string} 该选项用于指定生成 sourcemap 文件的位置
    interop,
    chunkFileNames, // {string} 用于对代码分割中产生的 chunk 文件自定义命名，默认 "[name]-[hash].js"

    // 高危选项
    exports,
    amd,
    indent
    strict
  },
  watch: {
	include, // {string} 限制文件监控
	exclude // {string} 禁止文件监控
  }
};

babel 使用

安装

bash

npm i -D @rollup/plugin-babel @babel/preset-env @babel/plugin-external-helpers

配置

javascript

// rollup.config.js
import babel from '@rollup/plugin-babel'

export default {
  plugins: {
    babel()
  }
}

json

// .babelrc
{
  "presets": [
    [
	  "@babel/preset-env",
      {
         "modules": false // 防止 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS ，导致 Rollup 的一些处理失败
      }
    ]
  ],
  "plugins": ["@babel/plugin-external-helpers"]
}

typescript使用

安装

bash

npm i typescript tslib
npm i -D @rollup/plugin-typescript

配置

javascript

// rollup.config.js
import typescript from '@rollup/plugin-typescript'

export default {
  plugins: {
    typescript()
  }
}

sass使用

安装

bash

npm i -D sass rollup-plugin-postcss

配置

javascript

// rollup.config.js
import postcss from 'rollup-plugin-postcss'

export default {
  postcss({
    extract: true, // 提取css为文件方式
    minimize: true, // 压缩
  }),
}

本地服务器与热更新

安装

bash

npm i -D rollup-plugin-serve rollup-plugin-livereload

配置

javascript

// rollup.config.js
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

export default {
  plugins: {
	serve({ // 本地服务器
      open: true,
      contentBase: 'dist',
      port: 8080,
    }),
    livereload({ // 热更新
      watch: 'dist',
      verbose: true,
    })
  }
}

完整案例 📦，可能不一定使用与工作业务需求，只是简单入门的案例。它是由 react + typescript + sass + rollup 组成。

rollupjs 快速入门 ​

配置文件 ​

rollupjs 快速入门

配置文件