rollup.js & vue.js All In One

rollup.js & vue.js All In One

UMD

webpack / rollup

https://github.com/umdjs/umd

// UMD === amd + cjs + iife

browser

// IIFE , closure 闭包

UMD === amd + cjs + iife

amd – Asynchronous Module Definition, used with module loaders like RequireJS

cjs – CommonJS, suitable for Node and other bundlers (alias: commonjs)

es – Keep the bundle as an ES module file, suitable for other bundlers and inclusion as a <script type="module"> tag in modern browsers (alias: esm, module)

iife – A self-executing function, suitable for inclusion as a <script> tag. (If you want to create a bundle for your application, you probably want to use this.). "iife" stands for "immediately-invoked Function Expression"

umd – Universal Module Definition, works as amd, cjs and iife all in one

system – Native format of the SystemJS loader (alias: systemjs)

https://rollupjs.org/guide/en/#outputformat

vue

typescript

import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript'

export default {
  input: 'src/MyComponent.vue',
  output: {
    format: 'esm',
    file: 'dist/MyComponent.js'
  },
  external: ['vue'],
  plugins: [
    typescript({
      tsconfig: false,
      experimentalDecorators: true,
      module: 'es2015'
    }),
    vue()
  ]
}

components library

import vue from 'rollup-plugin-vue'

export default [
  // ESM build to be used with webpack/rollup.
  {
    input: 'src/index.js',
    output: {
      format: 'esm',
      file: 'dist/library.esm.js'
    },
    plugins: [
      vue()
    ]
  },
  // SSR build.
  {
    input: 'src/index.js',
    output: {
      format: 'cjs',
      file: 'dist/library.ssr.js'
    },
    plugins: [
      vue({ template: { optimizeSSR: true } })
    ]
  },
  // Browser build.
  {
    input: 'src/wrapper.js',
    output: {
      format: 'iife',
      file: 'dist/library.js'
    },
    plugins: [
      vue()
    ]
  }
]

https://rollup-plugin-vue.vuejs.org/examples.html#typescript

https://rollup-plugin-vue.vuejs.org/options.html#options

import vuePlugin from 'rollup-plugin-vue'
 
export default {
  plugins: [
    vuePlugin(/* options */)
  ]
}

rollup plugins

$ npm i rollup-plugin-vue

rollup-plugin-vue

https://www.npmjs.com/package/rollup-plugin-vue

https://github.com/vuejs/rollup-plugin-vue

https://www.npmjs.com/package/rollup-plugin-typescript

https://www.npmjs.com/package/vue-sfc-rollup

https://github.com/ezekielchentnik/rollup-plugin-uglify-es

https://github.com/TrySound/rollup-plugin-uglify

rollup-plugin-terser

https://github.com/TrySound/rollup-plugin-terser

import { rollup } from "rollup";
import { terser } from "rollup-plugin-terser";

rollup({
  input: "main.js",
  plugins: [terser()],
});

rollup alias

https://github.com/rollup/plugins/tree/master/packages/alias#install

import alias from '@rollup/plugin-alias';

module.exports = {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    alias({
      entries: [
        { find: 'utils', replacement: '../../../utils' },
        { find: 'batman-1.0.0', replacement: './joker-1.5.0' }
      ]
    })
  ]
};

Rollup

https://cn.vuejs.org/v2/guide/installation.html#Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

https://cn.vuejs.org/v2/guide/installation.html#Rollup-1

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

vite

Provides Vue 3 Single File Components support.

$ npm i -D @vitejs/plugin-vue

Note: as of vue 3.2.13+ and @vitejs/plugin-vue 1.9.0+, @vue/compiler-sfc is no longer required as a peer dependency. 👎

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}

https://vitejs.dev/plugins/#vitejs-plugin-vue

https://github.com/vitejs/vite/tree/main/packages/plugin-vue

https://github.com/vitejs/vite/discussions/5663

https://github.com/vitejs/vite/tree/main/packages

refs

https://rollupjs.org/guide/zh/#outputformat

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---