汇总，Svelte，SCSS：如何一次构建不同的捆绑软件？

问题描述

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

解决方法

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

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

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

我也有关于livereload的问题，并修复了它们一次启动的问题：

!production && index == 0 && livereload('public'),

javascript rollup sass svelte