rollup打包第三方依赖

最新推荐文章于 2025-05-13 23:10:57 发布

Ruonorth

最新推荐文章于 2025-05-13 23:10:57 发布

阅读量6.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web javascript webpack 文章标签： javascript typescript 前端

本文链接：https://blog.youkuaiyun.com/riddle1981/article/details/127112195

web 同时被 3 个专栏收录

29 篇文章

订阅专栏

javascript

12 篇文章

订阅专栏

webpack

5 篇文章

订阅专栏

本文详细介绍了如何使用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()，
    
  ]
}

至此配置就全部完成了