rollup打包第三方依赖

本文详细介绍了如何使用Rollup打包处理ESModule,解决npm包绝对路径引用问题,以及处理未定义的`process`环境变量。通过引入@rollup/plugin-node-resolve、@rollup/plugin-commonjs和@rollup/plugin-replace等插件,逐步解决打包过程中的各种问题,确保代码能在不同环境下正常运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

相比于webpack的通用性来说,rollup更专用于esmodule的处理。这在某些场景下会需要一些额外的配置来处理特殊场景。

比如你使用rollup打包,产生报错:

Cannot use import statement outside a module 

这是因为rollup打包会处理相对路径,对于npm包的绝对路径引用是不会做任何处理的。这种情况可以用插件处理。

@rollup/plugin-node-resolve
配置如下:

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';


export default {
  input: "src/index.ts",
  plugins: [],
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm',
    },
    {
      file: pkg.browser,
      format: 'umd',
      name: 'Dry'
    }
  ],
  plugins: [
    typescript({
      check: false
    }),
    babel({
      presets: [['@babel/preset-env', {
        targets: {
          browsers: ['ie 11'],
        },
      }]],
    }),
    resolve(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

但是如果你使用的这个三方库没有默认default,则需要配合@rollup/plugin-commonjs使用。配置如下:

注意commonjs这个模块应当在任何插件调用前调用!

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';


export default {
  input: "src/index.ts",
  plugins: [],
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm',
    },
    {
      file: pkg.browser,
      format: 'umd',
      name: 'Dry'
    }
  ],
  plugins: [
    commonjs({
      include: /node_modules/
    }),
    typescript({
      check: false
    }),
    babel({
      presets: [['@babel/preset-env', {
        targets: {
          browsers: ['ie 11'],
        },
      }]],
    }),
    resolve()
  ]
}

此时不出意外的话,第三方模块已经顺利打包进bundle包了。在运行的时候还是会出一个意外,就是报错:

Uncaught ReferenceError: process is not defined

这可能是源码中包含:

if (process.env.NODE_ENV !== "production") {}

rollup在打包时是不会处理process环境的,这种情况需要插件额外处理。@rollup/plugin-replace

import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import pkg from './package.json';


export default {
  input: "src/index.ts",
  plugins: [],
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm',
    },
    {
      file: pkg.browser,
      format: 'umd',
      name: 'Dry'
    }
  ],
  plugins: [
    commonjs({
      include: /node_modules/
    }),
    typescript({
      check: false
    }),
    babel({
      presets: [['@babel/preset-env', {
        targets: {
          browsers: ['ie 11'],
        },
      }]],
    }),
    resolve()]
}

至此配置就全部完成了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值