Rollup+Svelte引入quoters包报错exports is not defined如何解决？

问题原因 #

你的Rollup插件执行顺序错误，是导致报错的核心原因：
Rollup插件按配置从上到下顺序执行，你当前配置中@rollup/plugin-node-resolve、@rollup/plugin-commonjs放在了@rollup/plugin-babel之后，导致CommonJS格式的quoters包在被引入时，还没经过commonjs插件的转换，包内的exports语法没有被替换为浏览器兼容的ES模块语法，浏览器运行IIFE格式的打包产物时不存在全局exports对象，直接抛出引用错误。

修复方案 #

1. 调整插件顺序，将resolve、commonjs移到babel之前，确保依赖解析和CommonJS转ES的逻辑先执行
2. 给commonjs插件添加明确的include规则，确保quoters包被正确转换

修改后的Rollup插件配置片段 #

plugins: [
    svelte({
      compilerOptions: {
        dev: !production,
      },
    }),

    nodePolyfills(),
    json(),
    copy({
      targets: [
        {
          src: "node_modules/bootstrap/dist/**/*",
          dest: "public/vendor/bootstrap",
        },
      ],
    }),

    css({ output: "bundle.css" }),

    // 调整顺序：先解析依赖，再转CommonJS，最后转译源码
    resolve({
      dedupe: ["svelte"],
      browser: true,
      preferBuiltins: false,
    }),
    commonjs({
      // 明确包含所有node_modules下的依赖，也可单独指定quoters路径
      include: /node_modules/
    }),
    babel({
      exclude: "node_modules/**",
      babelHelpers: 'bundled' // 可选添加，避免babel helpers相关警告
    }),

    !production && serve(),
    !production && livereload("public"),
    production && terser(),
],

修改后重新启动开发服务即可解决报错。

内容的提问来源于stack exchange，提问作者Suman Kumar