rollup.config.js

rollup.config.js

import resolve from 'rollup-plugin-node-resolve'
import replace from 'rollup-plugin-replace'
import commonjs from 'rollup-plugin-commonjs'
import svelte from 'rollup-plugin-svelte'
import babel from 'rollup-plugin-babel'
import json from 'rollup-plugin-json'
import alias from 'rollup-plugin-alias'
import postcss from 'postcss'
import { terser } from 'rollup-plugin-terser'
import config from 'sapper/config/rollup.js'
import pkg from './package.json'
import aliasPaths from './alias.js'
import path from 'path'
import svgLoader from 'svg-inline-loader'
import { createFilter } from 'rollup-pluginutils'

import { transformSync } from '@babel/core'

const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD

const externalDependencies = [
  path.resolve(__dirname, './static/css/global.scss')
]

function svg(options = {}) {
  const filter = createFilter(options.include, options.exclude)
  return {
    transform(SVGContent, filePath) {
      if (!filter(filePath) || path.extname(filePath) !== '.svg') {
        return null
      }
      return {
        code: `export default ${JSON.stringify(
          svgLoader.getExtractedSVG(SVGContent, options)
        )}`,
        map: { mappings: '' }
      }
    }
  }
}

const preprocess = {
  style: ({ content, attributes }) => {
    // Plugins List:
    // https://github.com/postcss/postcss/blob/master/docs/plugins.md

    const plugins = [
      require('postcss-import'),
      require('postcss-nested'),
      require('postcss-cssnext')
    ]

    const withGlobals = `
    @import url('/static/css/global.scss');\n
    ${content}`

    return new Promise((fulfil, reject) => {
      postcss(plugins)
        .process(content, {
          from: 'src',
          map: { inline: false }
        })
        .then(result => {
          fulfil({
            code: result.css.toString(),
            map: result.map.toString()
          })
        })
        .catch(err => reject(err))
    })
  }
  // script: ({ content }) => {
  //   const { code, map } = transformSync(content, { babelrc: true })
  //
  //   return { code, map }
  // }
}

const babelConfig = {
  extensions: ['.js', '.html'],
  runtimeHelpers: true,
  exclude: ['node_modules/@babel/**'],
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true
        },
        useBuiltIns: 'usage'
      }
    ]
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
    [
      '@babel/plugin-transform-runtime',
      {
        useESModules: true
      }
    ]
  ]
}

export default {
  client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
      alias(aliasPaths),
      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode)
      }),
      svg(),
      svelte({
        dev,
        legacy,
        hydratable: true,
        preprocess,
        emitCss: true,
        externalDependencies
      }),
      resolve(),
      commonjs(),
      json(),
      babel(babelConfig),

      !dev &&
        terser({
          module: true
        })
    ],

    // temporary, pending Rollup 1.0
    experimentalCodeSplitting: true
  },

  server: {
    input: config.server.input(),
    output: config.server.output(),
    plugins: [
      alias(aliasPaths),
      replace({
        'process.browser': false,
        'process.env.NODE_ENV': JSON.stringify(mode)
      }),
      svg(),
      svelte({
        generate: 'ssr',
        dev,
        legacy,
        preprocess,
        externalDependencies
      }),
      resolve(),
      commonjs(),
      json()
    ],
    external: Object.keys(pkg.dependencies).concat(
      require('module').builtinModules ||
        Object.keys(process.binding('natives'))
    ),

    // temporary, pending Rollup 1.0
    experimentalCodeSplitting: true
  },

  serviceworker: {
    input: config.serviceworker.input(),
    output: config.serviceworker.output(),
    plugins: [
      alias(aliasPaths),
      resolve(),
      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode)
      }),
      commonjs(),
      legacy && babel(babelConfig),
      !dev && terser()
    ]
  }
}