rollup打包踩坑经验

本文记录了在使用Rollup打包过程中遇到的四个主要问题及解决方案。报错1指向rollup官方文档,报错2是由于package.json中main字段设置不正确导致引用失败,修正路径后解决。报错3揭示了在特定情况下,需将import语法改为require以避免与rollup冲突。报错4提及的global()报错,通过调整配置避免了不必要的全局解析。

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

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import replace from 'rollup-plugin-replace';
import nodeResolve from 'rollup-plugin-node-resolve';
import { uglify } from 'rollup-plugin-uglify';
import { eslint } from 'rollup-plugin-eslint';
import json from '@rollup/plugin-json';
import builtins from 'rollup-plugin-node-builtins';
import typescript from '@rollup/plugin-typescript';

const ENV = process.env.NODE_ENV;
export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'kaleido-fed-sdk',
  },
  plugins: [
    nodeResolve({
      browser: true,
      preferBuiltins: true,
	  mainFields: ['browser']
    }),
    builtins(),
    commonjs(),
    eslint({
      include: ['src/**'],
      exclude: ['node_modules/**']
    }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV)
    }),
    typescript(),
    json(),
    babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true, // 配置runtime,不设置会报错
    }),
    ENV === 'production' && uglify()
  ]
};

 报错1:

参阅: https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module 

import commonjs from 'rollup-plugin-commonjs';

export default {
    // ...
    plugins: [
        commonjs({
           namedExports: {'tslib': ['__awaiter', '__generator']}
        }),
    ]
}

 

报错2:

本地rollup打包成功,在另外一个项目中引用这个sdk报的错。而这个包已经确实安装了的。

原因:我的sdk文件中的package.json中的main指定的路径不对。原先写的是:“main”: "./dist/bundle.js"。改成如下:

 

报错3:

这个报错跟我引入的ali-oss库的方式有关。之前是用的import引入,改成了require语法就好了。而我的文件都是支持es6语法的,其余的三方库都可以用import, 唯独这个三方库需要require. 可能rollup打包某些场景有些冲突。

 报错4:

具体的报错已经复现不了了。但是我记得当时界面会报错global()...的报错。是因为我在rollup配置项中加了global的一个解析,这步操作不需要

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值