Vite vs. WebPack

Questions
1

Is there a way to tell Vitejs to bundle the output (much like former F7-webpack-builds)? (instead using ESM modules and <script type="module">)?

I have a problem running (modern) F7-vite apps from the file:// protocol using an embedded browser. Using an older F7-app (using F7v4) works like a charm…

Any ideas?

2

Out of the box Vite can’t do it. But we can just re-bundle its output with rollup.

  1. Create new project with F7 CLI
  2. npm i
  3. npm i rollup --save-dev
  4. in the project root folder create build/build-bundle.js with the following content:
const rollup = require('rollup');
const fs = require('fs');
const path = require('path');

const build = async () => {
  // rebuild JS without modules
  let entry = fs
    .readdirSync(path.resolve(__dirname, '../www/assets'))
    .filter((f) => f.includes('index.') && f.includes('.js'))[0];
  const hash = entry.split('index.')[1].split('.js')[0];

  const bundle = await rollup.rollup({
    input: path.resolve(__dirname, '../www/assets/', entry),
  });
  await bundle.write({
    file: path.resolve(__dirname, '../www/assets/', `index.${hash}.js`),
    format: 'iife',
    name: 'MyApp',
    sourcemap: false,
  });

  // Remove old chunk files
  fs.readdirSync(path.resolve(__dirname, '../www/assets')).forEach((f) => {
    if (f.includes('.js') && f.split('.').length > 2 && f !== `index.${hash}.js`) {
      fs.rmSync(path.resolve(__dirname, '../www/assets', f));
    }
  });

  // fix index.html
  const indexPath = path.resolve(__dirname, '../www/index.html');
  const indexContent = fs
    .readFileSync(indexPath, 'utf8')
    .split('\n')
    .map((line) => {
      if (line.includes('<link rel="modulepreload"')) return '';
      if (line.includes('<script type="module"')) return '';
      if (line.includes('</body>'))
        return `  <script src="assets/index.${hash}.js"></script>\n</body>`;
      return line;
    })
    .join('\n');
  fs.writeFileSync(indexPath, indexContent);
};

build();
  1. In package.json modify build command to the following:
"build": "cross-env NODE_ENV=production vite build && node ./build/build-bundle",