我的 Svelte 元素包含三个完全不同的 View :admin、client 和 POS(销售点)。

| src/
|   admin/
|      index.js
|      admin.svelte
|      admin.scss
|   client/
|      index.js
|      client.svelte
|      client.scss
|   pos/
|      index.js
|      pos.svelte
|      pos.scss
| rollup.config.js

我需要同时构建所有三个 Svelte 文件(使用 yarn build)并在 public 目录中生成三个不同的 css 文件。 css/ 下的 CSS 文件和 js/ 下的 JS 文件是这样的:

| public/
|   css/
|      admin.css
|      client.css
|      pos.css
|   js/
|      admin.js
|      client.js
|      pos.js

✅ 到目前为止我能取得的成就:

• 每个 JS 文件(来自 Svelte)都是在 public 中构建的(但不是 js)
• Svelte 的每个 css 都内置在 public/css

? 我做不到的事:

• 未构建 SCSS 文件
• JS文件不在js/
• JS文件都命名为'index.js'
• Livereload 到本地

那是 rollup.config.js:

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, index) {
    return [
        svg({stringify: true}),
        json({}),
        scss({
            output: `css/scss-${name}.css`
        }),
        svelte({
            preprocess: {
                style: sass({all: true}, {name: 'scss'}),
            },
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: css => {
                css.write(`css/svelte-${name}.css`);
            }
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser({
            compress: {
                keep_fnames: true,
                keep_classnames: true,
            }
        }),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload({
            watch: `public/${name}.*`,
            port: 3000 + index
        }),
    ]
}

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

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


// Code author:
// https://github.com/rollup/rollup/issues/703#issuecomment-508563770
export default views.map((name, index) => ({
    input: `src/${name}/index.js`,
    output: {
        sourcemap: true,
        format: 'iife',
        name: name,
        dir: 'public',
    },
    plugins: plugins(name, index),
    watch: { clearScreen: false }
}));

最佳答案

对于文件名:您应该只使用output.file，output.dir 仅在您在同一次运行中生成多个 block 时才有用，但您正在生成一个捆绑在三个不同的运行中。这也将同时解决目录问题。

output: {
  sourcemap: true,
  format: 'iife',
  name: name,
  file: `public/js/${name}.js`,
},

我不确定 scss 和 livereload，代码看起来对我来说没问题

关于javascript - 汇总、Svelte、SCSS : how to build different bundles at once?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63813105/