如何通过Rollup、Svelte、SCSS一次性构建多份不同产物？

Let's tackle each of your issues one by one and get your build setup working exactly as you need it.

1. Fix JS Output Path & Naming #

Right now your JS bundles are landing straight in public/ as index.js because you're using dir: 'public' in the output config. To move them into public/js/ with the correct view-specific names, switch to using file instead of dir and define the full target path:

output: {
  sourcemap: true,
  format: 'iife',
  name: name,
  file: `public/js/${name}.js`, // Puts each JS bundle in js/ with the view's name
},

2. Properly Bundle SCSS Files #

Your current setup generates separate scss-${name}.css and svelte-${name}.css files. We can merge both your standalone SCSS files and Svelte component styles into a single public/css/${name}.css file per view:

• Update the rollup-plugin-scss output path to match your desired structure
• Adjust the Svelte css.write path to the same file (Rollup will automatically append component styles to the standalone SCSS output)

// Inside the plugins function
scss({ 
  output: `public/css/${name}.css`,
  sourceMap: !production, // Add sourcemaps for dev mode
}),
svelte({
  preprocess: {
    style: sass({ all: true }, { name: 'scss' }),
  },
  dev: !production,
  css: css => {
    css.write(`public/css/${name}.css`); // Merges component styles with standalone SCSS
  }
}),

3. Fix Livereload Functionality #

The previous livereload config watched the wrong paths (since JS and CSS now live in subdirectories). We'll update it to watch the entire public directory, and tweak the serve function to only spawn one dev server instance (instead of multiple for each entry):

// Inside the plugins function
!production && livereload({ 
  watch: 'public', 
  port: 3000, // Use a single port for all views
}),

// Updated serve function to avoid multiple server spawns
function serve() {
  let started = false;
  return {
    writeBundle() {
      if (!started) {
        started = true;
        require('child_process').spawn('npm', ['run', 'start', '--', '--dev', '--port', '3000'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true
        });
      }
    }
  };
}

Also, double-check your package.json has a valid start script (using sirv is standard for Svelte dev servers):

"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w",
  "start": "sirv public --no-clear"
}

Full Updated rollup.config.js #

Here's the complete fixed configuration that addresses all your requirements:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import { sass } from 'svelte-preprocess-sass';
import scss from 'rollup-plugin-scss';
import svg from 'rollup-plugin-svg-import';
import json from '@rollup/plugin-json';

const production = !process.env.ROLLUP_WATCH;

function plugins(name) {
  return [
    svg({ stringify: true }),
    json({}),
    scss({ 
      output: `public/css/${name}.css`,
      sourceMap: !production,
    }),
    svelte({
      preprocess: {
        style: sass({ all: true }, { name: 'scss' }),
      },
      dev: !production,
      css: css => {
        css.write(`public/css/${name}.css`);
      }
    }),
    resolve({
      browser: true,
      dedupe: ['svelte']
    }),
    commonjs(),
    !production && serve(),
    production && terser({
      compress: {
        keep_fnames: true,
        keep_classnames: true,
      }
    }),
    !production && livereload({ 
      watch: 'public', 
      port: 3000,
    }),
  ]
}

function serve() {
  let started = false;
  return {
    writeBundle() {
      if (!started) {
        started = true;
        require('child_process').spawn('npm', ['run', 'start', '--', '--dev', '--port', '3000'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true
        });
      }
    }
  };
}

const views = [
  'admin',
  'client',
  'pos',
];

export default views.map((name) => ({
  input: `src/${name}/index.js`,
  output: {
    sourcemap: true,
    format: 'iife',
    name: name,
    file: `public/js/${name}.js`,
  },
  plugins: plugins(name),
  watch: { clearScreen: false }
}));

Verifying the Fixes #

After updating the config:

• Run yarn dev to start the dev server with working livereload
• Run yarn build and check the public directory:
  • public/css/ will contain admin.css, client.css, pos.css (merging both standalone SCSS and Svelte component styles)
  • public/js/ will contain admin.js, client.js, pos.js
  • Livereload will refresh the browser whenever any file in the public directory changes

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