Блог

Мой проект Svelte состоит из трех совершенно разных представлений: 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 ) и генерировали три разных файла css в public каталоге. CSS-файлы под css/ и JS-файлы под js/ вот так:

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

✅ Чего я мог достичь до сих пор:

• Каждый файл JS (из Svelte) встроен public (но не js )
• Каждый CSS из Svelte встроен public/css

🚫 Что я не смог сделать:

• Файлы SCSS не создаются
• Файлы JS не находятся внутри js/
• Все файлы JS имеют имена ‘index.js ‘
• Загрузка Livereload в localhost

Это 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 amp;amp; serve(),

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

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production amp;amp; 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 полезно только в том случае, если вы генерируете несколько блоков в одном запуске, но вы генерируете один пакет в трех разных запусках. Это также одновременно устранит проблему с каталогом.

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

Я не уверен в scss и livereload, этот код выглядит нормально для меня