Svelte & Typescript & Rollup

├── LICENSE
├── package.json
├── public
│ ├── app.css
│ ├── app.css.map
│ ├── assets
│ │ └── haha.json
│ ├── bundle.css
│ ├── bundle.js
│ ├── bundle.js.map
│ ├── bundle.js.zip
│ ├── index.html
│ └── jquery.js
├── readme.md
├── rollup.config.js
├── src
│ ├── api
│ ├── app.ts
│ ├── assets
│ │ ├── js
│ │ │ └── axios.js
│ │ └── scss
│ │ └── app.scss
│ ├── components
│ │ ├── AnotherButton.html
│ │ ├── Button.html
│ │ └── Coupon.html
│ ├── types
│ │ ├── html.d.ts
│ │ └── svelte.d.ts
│ └── utils
│ ├── brototype.js
│ ├── customWindow.ts
│ └── utils.ts
├── tsconfig.json
├── yarn-error.log
└── yarn.lock

import svelte from 'rollup-plugin-svelte';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import tscompile from 'typescript';
import replace from 'rollup-plugin-replace';
import json from 'rollup-plugin-json';
import filesize from 'rollup-plugin-filesize';
import visualizer from 'rollup-plugin-visualizer';
// import async from 'rollup-plugin-async';
// import scss from 'rollup-plugin-scss';
// import sass from 'node-sass';
import less from 'less';
import rollupLess from 'rollup-plugin-less';



import { minify } from 'uglify-es';

const nodeEnv = process.env.NODE_ENV || 'development';
const appBasePath = process.env.APP_BASE_PATH || '';
const serverUrl = process.env.SERVER_URL || '';
const production = nodeEnv == 'production';

export default {
    input: './src/app.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        file: 'public/bundle.js',
        name: 'app',
        sourcemap: true,
    },
    plugins: [
        commonjs(),
        typescript({typescript: tscompile}),
        filesize(),
        visualizer({
            filename: './statistics.html',
            title: 'My Bundle',
            sourcemap: true,
        }),
        svelte({
            dev: !production,
            // extensions: [ '.html', '.vue' ],

            css: css => {
                css.write('public/app.css');  //似乎只有组件内的 css
            },
            cascade: true,
            preprocess: {
                style: ({ content, attributes }) => {
                    if (attributes.type !== 'text/less') return;

                    return new Promise((fulfil, reject) => {
                        // sass.render({
                        //  data: content,
                        //  includePaths: ['src'],
                        //  sourceMap: true,
                        //  outFile: 'x' // this is necessary, but is ignored
                        // }, (err, result) => {
                        //  if (err) return reject(err);

                        //  fulfil({
                        //      code: result.css.toString(),
                        //      map: result.map.toString()
                        //  });
                        // });


                        less.render(content, {sourceMap: {sourceMapFileInline: true}})
                        .then(function(output) {
                            fulfil({
                                code: output.css,
                                map: output.map
                            });
                            // output.css = string of css
                            // output.map = string of sourcemap
                            // output.imports = array of string filenames of the imports referenced
                        },
                        function(error) {
                            console.log(error)
                        }).catch(function(e){
                            console.log(e);
                        });
                    });
                }
            }
        }),
        resolve({
            preferBuiltins: false,
            jsnext: true,
            main: true,
            browser: true
        }),
        json(),
        // scss(), //不写配置  将默认输出到当前目录下 public 目录中
        // scss({
        //  output: 'public/bundle.css',
        // }),
        rollupLess({
            output: 'public/bundle.css'
        }),
        replace({
            'process.env.NODE_ENV': JSON.stringify(nodeEnv),
            'process.env.APP_BASE_PATH': JSON.stringify(appBasePath),
            'process.env.SERVER_URL': JSON.stringify(serverUrl),
        }),
        production && buble({ exclude: 'node_modules/**' }),
        production && uglify(),
        uglify()
    ]
};