rollup 打包一个组件库(简单教程)

rollup文档

讲讲常用的插件

• @rollup/plugin-node-resolve rollup node module 路径解析插件，告诉 Rollup 如何查找外部模块，如果你需要 npm 包资源打入你的源代码里面就需要配置这个，一般直接使用 external 就可以了。如果你配置了这个，import dayjs from 'dayjs' 就会从node module 文件夹里面查找文件，会出现不必要的错误。感觉需要解析 node module的时候很少，毕竟 rollup 是主打 esbuild
  大概率会遇到的错误 https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency 这个使用 external 就可搞定，不过也需要看需要而定
• @rollup/plugin-commonjs rollup 默认是不会支持 打包 commonjs 格式的代码，如果需要打包为 commonjs 就需要和上面插件一起用, 下面会贴上打出来的代码格式，这是 rollup 打包commonjs 的关键，只要配了这两个插件都会打包出 commonjs，format 选项配置为 es 也改变不了。就是这么强硬
• rollup-plugin-vue 用来支持解析 vue 文件
• rollup-plugin-typescript2 这个插件使用来支持ts开发的，可以生成 .d.ts 文件; 相关参数可以去npm 查看

示例 @rollup/plugin-commonjs 和 @rollup/plugin-node-resolve 配合使用

为什么说这个的使用呢，我在基于 element plus 构建组件的时候报错，搜索到解决方案是使用 commonjs，但是打包出的依赖太多，一个 tabs 组件就包含了 loadsh，最终弃用了element plus

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  // external: ['dayjs'],
  plugins: [resolve({
    // 将自定义选项传递给解析插件
    customResolveOptions: {
      moduleDirectory: 'node_modules'
    }
  }), commonjs()],
}

// 没有使用 @rollup/plugin-commonjs， 打包后的代码就是 es module
'use strict';

var dayjs = require('dayjs');

console.log(dayjs().date());

// 使用的情况，会把你导入的包的源码全部打进的你的源码，这里只粘贴了部分代码
var dayjs_minExports = {};
var dayjs_min = {
  get exports(){ return dayjs_minExports; },
  set exports(v){ dayjs_minExports = v; },
};
var dayjs = dayjs_minExports;

import typescript from 'rollup-plugin-typescript2'
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  // external: ['dayjs'],
  plugins: [typescript()],
}

rollup-config-js

import typescript from 'rollup-plugin-typescript2'
import vue from 'rollup-plugin-vue' // 处理vue文件
import { resolve } from 'path'

const input = resolve(__dirname, '../packages') // 入口文件
const output = resolve(__dirname, '../dist/packages') // 输出文件

const config = [
  {
    input: `${input}/index.ts`,
    treeshake: true,
    external:['vue','element-plus','calendar-ts','@element-plus/icons-vue'],
    plugins: [
      // nodeResolve(),
      vue(),
      typescript({
        useTsconfigDeclarationDir: false,
        tsconfigOverride: {
          include: ['packages/**/*'],
          exclude: ['node_modules', 'examples', 'mobile', 'tests']
        },
        abortOnError: false,
        clean: true
      })
    ],
    output: {
      dir: `${output}/es`,
      format: 'es',
      preserveModules: true,
      preserveModulesRoot: 'packages'
    }
  }
]
export default config

treeshake.moduleSideEffects

摇树的配置, 我配置 treeshake 为 false, 这个配置项对于内部的导入是没有任何作用的, 只对外部插件有作用

import name from "./index2";
import 'hexfuture-ui'
console.log(name);

编译后的代码会把导入的外部包, 你在代码里面没有使用的时候删除, 如果是 './index.ts' 不管怎么配置都是会删除的

const name = 3;
var name$1 = name;
console.log(name$1);

打包组件库教程