Some rollup settings are ignored

[darekkay]

Describe the bug

The config option build.rollupOptions.output.banner doesn't have any effect. Similar happens to footer and intro.

From what I understand, vite uses rollup for a production build, so rollupOptions should be applied to the output JS files. I've changed the build.rollupOptions.output.chunkFileNames and this one indeed is reflected.

Reproduction

• Clone repository, install dependencies, build app:

git clone git@github.com:darekkay/vite-rollup-banner-bug.git
cd vite-rollup-banner-bug
yarn
yarn build

• Open JS files under dist/assets (index.SHA.js and vendor.SHA.js)
• Expected behavior: The banner string should be added at the top of the JS files.
• Actual behavior: The banner string is ignored and not included in any of the JS files.
• Note: The according esbuild banner config does work in development mode as expected (but this issue is regarding the build command which uses rollup instead of esbuild).
• Note: Similar issue exists for the footer and intro options.

Config file:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        banner: "/* This banner is missing in the output */ var moo = 1;",
      },
    },
  },
  plugins: [reactRefresh()]
})

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Memory: 20.55 GB / 31.94 GB
  Binaries:
    Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 90.0.4430.85
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.46)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: ^2.2.3 => 2.2.3

Used package manager: yarn

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[QiroNT]

These configs ARE working. Just you're not using them right.

For banner & footer, vite uses terser to minify (includes delete comments) during build. To keep the comment, you'll need to mark the comment as important by using /*! */ instead of /* */. (generally disabling comment deleting is a bad idea)

For your intro, it's just because you're not using ENVIRONMENT so it got automatically treeshaked. By setting treeshake and minify to false you'll see this appears.

Here is a working config for you:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        banner: "/*! This banner is added in the output */",
        footer: "/*! This footer is added in the output */",
        intro: 'const ENVIRONMENT = "production";',
      },
      treeshake: false,
    },
    minify: false,
  },
});

[darekkay]

Thanks a lot @QiroNT for the explanation, this makes sense. I didn't want to totally disable treeshaking/minification, but I needed a workaround for facebook/regenerator#378 . Assigning the variable to window was sufficient in my case:

    rollupOptions: {
      output: {
        intro: "window.regeneratorRuntime = undefined;"
      }
    },