rollup-vue-plugin typescript2 snippet

snippets.ts

// rollup.build.config
import path from 'path'
import vue from 'rollup-plugin-vue'
import resolve from '@rollup/plugin-node-resolve'
import common from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import typescript from 'rollup-plugin-typescript2'
import alias from '@rollup/plugin-alias'
import postcss from 'rollup-plugin-postcss'

export const useBuildConfg = (opts) => {
  return {
    input: {
      ui: 'index.ts',
    },
    output: {
      dir: 'dist',
      entryFileNames: opts.outputEntryFileName,
      format: opts.outputEntryFileFormat,
      sourcemap: true,
    },
    plugins: [
      typescript(),
      vue({
        template: {
          optimizeSSR: opts.optimizeSSR,
        },
        style: {
          preprocessOptions: {
            scss: {
              sourceMap: false,
              includePaths: ['node_modules/', '../../node_modules/'],
            },
          },
        },
      }),
      postcss({ extract: opts.postCssExtract }),
      resolve({
        mainFields: ['module', 'main', 'jsnext'],
        extensions: [
          '.js',
          '.vue',
          '.mjs',
          '.json',
          '.jsx',
          '.json',
          '.sass',
          '.scss',
        ],
      }),
      alias({
        entries: {
          '~': path.resolve('./src'),
        },
      }),
      babel({
        babelHelpers: 'bundled',
        exclude: 'node_modules/**',
      }),
      common(),
    ],
    external: ['vue'],
  }
}

// rollup.config.js
import { useBuildConfg } from './config/rollup.build.config'

const csrBuildConfig = useBuildConfg({
  outputEntryFileName: '[name].js',
  outputEntryFileFormat: 'esm',
  postCssExtract: 'ui.scss',
  optimizeSSR: false,
})

const ssrBuildConfig = useBuildConfg({
  outputEntryFileName: '[name].ssr.js',
  outputEntryFileFormat: 'commonjs',
  postCssExtract: 'ui.ssr.scss',
  optimizeSSR: true,
})

export default [{ ...csrBuildConfig }, { ...ssrBuildConfig }]