rollup.js 模块打包

zhao1239902

已于 2022-06-21 11:01:50 修改

阅读量1.5k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-06-13 10:13:16 首次发布

本文链接：https://blog.csdn.net/zhao1239902/article/details/125254095

版权

个人记录日志，转载请说明出处！！

1.简介

rollup.js是Javascript的ES模块打包器
工作原理：
在这里插入图片描述

2.环境配置

全局安装

npm i rollup -g

3.使用

3.1单命令行模式：

rollup src/main.js -f es -o dist/bundle.js --watch
rollup 打包文件  -f  打包模式 -o 打包路径

3.1配置文件模式：

rollup -c rollup.config.dev.js 
rollup -c 指定配置文件

说明:
-f 参数是–format的缩写
amd表示采用AMD标准
cjs为CommonJS标准
esm（或es）为ES模块标准
-o 等价与 --file和–output.file
–watch 监听模式文件变更后自动打包

4.配置文件

4.1模式一（单文件配置模式）

根目录下创建rollup.config.js
ES模块标准编写

export default {
  input: './src/main.js', //输入 打包的文件
  output: [{  //输出 编译后文件
    file: './dist/index-cjs.js', //文件名
    format: 'cjs', //打包规范
    banner: '// hhh',  //头注释
    footer: '// powered by zcc' //尾注释
  }, {
    file: './dist/index-es.js',
    format: 'es',
    banner: '// hhh',  //头注释
    footer: '// powered by zcc' //尾注释
  }]
}

4.1模式二（双文件配置模式）

输入配置文件
创建rollup-input-options.js
CommonJS格式

module.exports = {
 input: './src/main.js'
}

输出配置文件
创建rollup-output-options.js
CommonJS格式

module.exports = [{
 file: './dist/index-cjs.js',
 format: 'cjs',
   banner: '// hhh',  //头注释
   footer: '// powered by zcc' //尾注释
}, {
 file: './dist/index-es.js',
 format: 'es',
   banner: '// hhh',  //头注释
   footer: '// powered by zcc' //尾注释
}, {
 file: './dist/index-amd.js',
 format: 'amd',
   banner: '// hhh',  //头注释
   footer: '// powered by zcc' //尾注释
}, {
 file: './dist/index-umd.js',
 format: 'umd',
 name: 'sam-umd', // 指定文件名称
   banner: '// hhh',  //头注释
   footer: '// powered by zcc' //尾注释
}]

写个打包逻辑js
rollup-build.js

const rollup = require('rollup')
const inputOptions = require('./rollup-input-options')
const outputOptions = require('./rollup-output-options')

async function rollupBuild(input, output) {
  const bundle = await rollup.rollup(input) // 根据input配置进行打包
  console.log(`正在生成：${output.file}`)
  await bundle.write(output) // 根据output配置输出文件
  console.log(`${output.file}生成成功！`)
}

(async function () {
  for (let i = 0; i < outputOptions.length; i++) {
    await rollupBuild(inputOptions, outputOptions[i])
  }
})()

说明
rollup.rollup(input) 获取打包对象，input打包文件路径
bundle.write(output) 输出打包文件 output打包文件路劲

执行
node rollup-build.js

tree-shaking特性

在打包后会清除没有调用的变量，从而减少代码大小，
UMD与CommonJS类似是不能够支持tree-shaking特性的

3.2 resolve插件（有模块引入的情况）

安装resolve插件
npm i -D rollup-plugin-node-resolve
修改配置文件rollup.plugin.config.js：

import resolve from 'rollup-plugin-node-resolve'

export default {
  input: './src/plugin/main.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve() //使用rollup插件
  ]
}

排除外包的情况

使用external
修改配置文件rollup.plugin.config.js：

import resolve from 'rollup-plugin-node-resolve'

export default {
  input: './src/plugin/main.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve({
      customResolveOptions: {
        moduleDirectory: 'node_modules' // 仅处理node_modules内的库
      } 
    }) //使用rollup插件
  ]，
  external:['包名'] //排除的外包名，打包后还是引入的包，不一起打包进去
}

3.3 识别commonjs模块打包

如果引入的是commonjs的库，rollup是不能识别到的
首先安装commonjs插件：
npm i -D rollup-plugin-commonjs
修改rollup.js的配置文件：

import commonjs from 'rollup-plugin-commonjs'
export default {
  input: '···',
  output: [···],
  plugins: [
    commonjs() //使用rollupcommonjs插件
  ]，
}

3.4使用babel 将es6+转为es5

首先安装babel插件：
npm i -D rollup-plugin-babel

import babel from 'rollup-plugin-babel'
export default {
  input: '···',
  output: [···],
  plugins: [
    babel({
		exclude: 'node_modules/**' // 排除node_modules
	}) //使用rollupbabel插件
  ]，
}

3.5使用json 识别json

引入的json自动转为对象
npm i -D rollup-plugin-json

import json from 'rollup-plugin-json'
export default {
  input: '···',
  output: [···],
  plugins: [
    json() //使用rollupjson插件
  ]，
}

3.6 uglify插件压缩代码体积

npm i -D rollup-plugin-uglify

import { uglify } from 'rollup-plugin-uglify'
export default {
  input: '···',
  output: [···],
  plugins: [
    uglify() //使用rollupuglify插件
  ]，
}

uglify插件不支持ES模块和ES6语法,需要用babel编译后再进行压缩代码

3.7 配置watch监听

1.创建rollup-watch-options.js，配置watch配置

module.exports = [{
  file: './dist/index-cjs.js',
  format: 'cjs',
  name: 'sam-cjs'
}]

2.创建watch执行rollup-watch.js

const rollup = require('rollup')
const inputOptions = require('./rollup--input-options')
const outputOptions = require('./rollup--output-options')
const watchOptions = require('./rollup-watch-options')

const options = {
  ...inputOptions,
  output: outputOptions,
  watchOptions
} // 生成rollup的options

const watcher = rollup.watch(options) // 调用rollup的api启动监听

watcher.on('event', event => {
  console.log('重新打包中...', event.code)
}) // 处理监听事件

// watcher.close() // 手动关闭监听