Rollup、Svelte、SCSS：如何同时构建不同的包？答案

【问题标题】：Rollup, Svelte, SCSS: how to build different bundles at once?Rollup、Svelte、SCSS：如何同时构建不同的包？
【发布时间】：2020-12-27 23:20:43
【问题描述】：

我的 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）并在 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 }
}));

【问题讨论】：

标签： javascript css sass svelte rollup

【解决方案1】：

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

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

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

【讨论】：