rollup简单使用

简介

rollup 是和webpack、 vite齐名的一种打包工具。但webpack和vite更适合打包应用，rollup偏向于打包类、库这样的工具项目。
支持多种格式(es、umd、cjs等)打包。详细配置可以看rollup官网

环境配置

全局安装rollup

pnpm i rollup -g

使用

rollup 也有很多配套的生态工具，我这里就不举例并安装了，大家可以去npm上面看。

新建一个项目，并创建rollop.config.js，并添加配置

rollop.config.js

// 配置typescript
import typescript from 'rollup-plugin-typescript2';
// 
import clear from 'rollup-plugin-clear';
// 简化引入路径
import resolve from 'rollup-plugin-node-resolve';
// 将commonJs模块转编es5
import commonjs from 'rollup-plugin-commonjs';
// 编译代码
import babel from 'rollup-plugin-babel';
// 压缩代码
import { terser } from 'rollup-plugin-terser';
// 静态文件存放
import copy from 'rollup-plugin-copy';

export default {
  // 入口文件
  input: ['./src/index.ts'],
  // 输出目录
  output: [
    {
      dir: 'bin',//存放目录
      format: "es", // es模块导出，支持按需加载
      name: '',//名称
      exports: "named", // 指定导出模式（自动、默认、命名、无）
      preserveModules: true, // 保留模块结构
      preserveModulesRoot: "src", // 将保留的模块放在根级别的此路径下
   },
  ],
  // 插件目录
  plugins: [
    // 会自动读取 文件tsconfig.json配置
    typescript(),
    // 打包存放前，需要清除的目录
    clear({
      targets: ['bin'],
    }),
    // 简化引入路径
    /*
      不配置：
        export foo from './foo/index.js'
        import bar from './bar/index.js'
      配置：
        export foo from './foo'
        import bar from './bar'
    */
    resolve(),
    // 将commonJs模块转编es5
    commonjs(),
    // 编译代码
    babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true,
    }),
    // 压缩代码
    terser(),
    // 不打包的文件，直接copy放进我们指定的目录中
    copy({
      targets: [
        { 
          src: './assets', //静态文件
          dest: './bin/style/' //需要存放的目录
        }
      ],
    }),
  ],
  /*
    比如我们在自己的库中需要使用第三方库，例如jquery等，
    又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性。作用：排除不希望打包进项目的库
  */ 
  external: [],
};

package.json 配置

这里我只例举出了相关的配置，可以根据实际位置进行修改

	"main": "bin/index.ts",
  	"module": "bin/index.js",
  	"typings": "bin/index.d.ts",
  	"type": "module",
  	"scripts": {
    	"build": "rollup -c ./rollup.config.js",
    	"test": "echo \"Error: no test specified\" && exit 1"
  	},

目录结构

打包完成后的目录结构

	项目名
		- bin
			- foo
				index.d.ts
				index.js
			- demo
				index.d.ts
				index.js
			- index.d.ts
			- index.js
		- src	
			- foo
				- index.ts
			- demo
				index.ts
			- index.ts

总结

总的来说rollup要比webpack的配置要简单一些，体积要小一些，没有那么复杂的配置，另外说一下，rollup本身就支持es module，vite也是基于rollup的。