Awesome Rollup

⚡️ Delightful Rollup Plugins, Packages, and Resources

Resources

Official Guide - The user guide and documentation site.

Plugins

Core Plugins

Plugins created and maintained by the Rollup organization.

alias - Alias modules in a build.
babel - Seamless integration with Babel.
buble – Transpile with Bublé.
commonjs - Convert CommonJS modules to ES Modules.
dsv - Convert CSV and TSV files into JavaScript modules.
eslint - Lint entry points and all imported files with ESLint.
html - Creates HTML files to serve Rollup bundles
image - Import JPG, PNG, GIF and SVG images.
inject - Scans for global variables and injects import statements.
json - Convert JSON files to ES Modules.
legacy - Add export statements to plain scripts.
multi-entry - Multiple entry points for a bundle.
node-resolve - Use the Node resolution algorithm.
replace – Replace occurrences of a set of strings.
run - Run your bundle after it's generated.
strip - Remove expressions from code.
sucrase - Compile , Flow, JSX.
typescript - Seamless integration with Typescript.
url - Inline import files as data-URIs.
virtual - Load modules from memory.
wasm - Inlines and imports WebAssembly modules.
yaml - Import data from YAML files.

All-Purpose Awesome

build-statistics - Plugin that keeps a continuous log of your build time.
dev - Development server with additional logging and options.
graph – Generates a module dependency graph.
nollup - Rollup-compatible development bundler providing Hot Module Replacement.
notify – Display errors as system notifications.
progress - Show build progress in the console.
rollpkg - No config build tool to create packages with Rollup and TypeScript
serve - Development Server in a Plugin.
sizes - Display bundle content and size in the console.
size-snapshot - Track bundle size and treeshakability with ease.
visualizer - Bundle and dependency visualizer.

Code Quality

Plugins which help with code quality.

analyzer - Statistics and Metrics for a bundle.
cleanup – Remove and modify code based on an opinionated ruleset.
eslint-bundle - Lint bundles with ESLint.
flow - Remove Flow type annotations.
flow-entry - Export Flow types from a bundle.
istanbul - Seamless integration with Istanbul.
sass-lint - Lint SCSS files
stylint - Lint Stylus files.
unassert - Remove assertion calls.

CSS

Plugins for working with CSS.

bundle-scss - Bundle all SCSS imports into one SCSS file.
collect-sass - Compiler SASS files in a single context.
css-only – Output plain CSS.
css-porter - Combine CSS imports and output to file.
embed-css - Import and append CSS to a bundle.
less - Compile LESS files.
less-modules - Import or Bundle LESS files.
modular-css - Alternative CSS Modules implementation supporting Rollup.
postcss - Seamless integration with PostCSS.
sass - SASS integration for a bundle.
scss - Compile SASS and CSS.
styles - Universal plugin for styles: PostCSS, Sass, Less, Stylus and more.
stylus-css-modules – Compile Stylus and inject CSS modules
sass-variables - Import SASS variables as Objects.

Frameworks

Plugins for working with awesome JavaScript frameworks.

angular - Angular2 template and styles inliner.
jsx - Compile React JSX and JSX-like components.
riot - Riot.js tagfile support.
svelte — Compile Svelte components.
vue - Compile Vue components.
vue-inline-svg - Import SVG files as Vue components.

Modules

Plugins which control the behaviour of modules: dependencies, imports, exports, and external modules.

amd - Convert AMD modules to ES6.
async-define - Wrap an AMD bundle with async-define.
baked-env - Import process.env as a module for baking environment variables at build time.
bower-resolve – Use Bower the resolution algorithm.
cjs-es - Convert CommonJS modules without proxying and reassignment.
consts - Import constants at build time.
external-assets - Make assets external but include them in the output.
external-globals - Replace imported bindings with a global variable.
force-binding - Composes multi-entry and node-resolve to prevent duplicated imports.
glob-import - Glob support for import statements.
hoist-import-deps - Avoid waterfalls when dynamically importing modules by hoisting import dependencies.
ignore - Ignore modules by replacing with empty objects.
import-alias - Maps an import path to another.
import-assertions - Add support for TC39 import assertions (e.g. assert types css and json)
includepaths – Provide base paths from which to resolve imports.
named-directory - Provides shortcuts for colocated modules in directories.
node-builtins - Node builtin modules as ES modules.
node-globals - Injects node globals.
node-resolve-angular - Node module resolution support for Angular 4+.
ts-paths – Resolve modules from tsconfig paths.
skypack-resolver - Use Skypack CDN for external dependencies.
web-worker-loader - Package Workers for NodeJS and the browser.

Other File Imports

Plugins which allow importing other types of files as modules.

file-as-blob – Import a file as a blob: URL.
geojson - Convert GeoJSON files to ES Modules.
glsl - Import GLSL shaders as compressed strings.
glsl-optimize - Import and optimize GLSL shaders as compressed strings. Supports glslify.
glslify - Import GLSL strings with glslify.
gltf - Import glTF 3d models as a URI or inlined JSON.
html - Import html files as strings.
hypothetical - Import modules from a virtual filesystem.
imagemin - Optimize images with imagemin.
jsonlines - Imports .jsonl (JSON Lines) files as JSON arrays.
markdown - Import code from fenced code blocks in Markdown.
md - Import and compile markdown files.
mjml - Convert MJML into responsive email templates.
@wasm-tool/rust - Bundle and import Rust crates.
rust - Compile Rust as WebAssembly or a Node.js Add-on.
spritesmith — Convert a set of images into a spritesmith sprite-sheet.
string – Import text files as strings.
svg-import - Import SVG files as SVG DOM Node or string.
svg-sprite — Import SVG files as an external SVG sprite.
svg-to-symbol - Import SVG files as symbol strings.
svgo - Import SVG files as strings
vinyl - Import from Vinyl files
smart-asset - Import any assets as url using rebase, copy or inline mode. Similar to url but has more hashing options and works well together with babel using transform hook.
toml - Convert .toml files to ES6 modules.

Output

Plugins which affect the final output of a bundle.

app-utils - Common build utilities for applications.
banner - Append content before js bundle.
bundleutils - Set of commonly used utility functions.
bundle-html - Inject the bundle js/css files as well as external js/css files to html template.
by-output - Apply plugins according to special output option, reduce config and save time.
clear - Clear an output directory before a build.
closure-compiler – Compress Rollup Bundles with Closure Compiler.
concatfiles - Concatenate files to bundle or other files.
copy - Copy files during a build.
copy-assets - Copy specified assets to the output directory.
cpy - Easily copy files and folders during a build.
copy-smartly - Smartly copy files if they are changed, created or deleted.
delete - Delete files and folders during a build.
emit-ejs - Emit files from ejs templates.
espruino - Send a bundle to Espruino devices.
filesize - Display the file size of the bundle in the console.
generate-html-template - Generate an HTML file for a bundle.
generate-package-json - Generate a package.json file with dependencies from your bundle.
gzip - Create a compressed GZ artifact for your bundle.
hash – Generate output files with unique hashes.
html-minifier – Minify HTML output files using html-minifier.
iife - Convert ES modules to Immediately Invoked Function Expressions.
license - Add Licensing to a bundle.
live-reload - Live reloading for a bundle.
manifest-json - Generate a manifest.json file for a PWA.
output-manifest - Generating a chunk manifest.
preserve-shebang - Preserves leading shebang in a build entry.
prettier - Run prettier on a bundle.
rebase - Copies and adjusts asset references to new destination-relative location.
shift-header - Move comment headers to the top of a bundle.
sri - Add subresource integrity attributes for your bundle.
static-site - Generate HTML for a bundle.
terser - Minify a bundle using Terser.
uglify - Minify a bundle with UglifyJS.
version-injector - Inject your package’s version number into static build files.
zip - Pack all assets into a zip file.

Templating

Plugins for working with template languages.

twig - Import pre-compiled Twig.js templates.
dustjs - Import Dust.js templates.
eft - Compile ef.js templates.
ejs - Compile .EJS templates.
jst - Compile Lodash templates.
lit-html - Compile "plain" .html files as lit-html templates
posthtml-template - Seamless integration with PostHTML
pug - Compile Pug Templates as es6 modules.
pug-html - Import Pug Templates as HTML strings during a build.
reshape - Compile Reshape Templates.

Text Replacement

Plugins which search for, and replace text in a bundle.

ascii – Rewrite non-ASCII characters as string literals.
re – Replace text with Regular Expressions.
strip-code - Remove text with Regular Expressions.

Transpilation

Plugins which affect code.

async - Replace async functions with generators.
bucklescript - Compile ReasonML / OCaml.
coffee-react - Compile CJSX and CoffeeScript.
coffee-script – Compile CoffeeScript.
dts - Rollup .d.ts TypeScript Definition files.
elm - Compile Elm.
esbuild-transform - Transform with esbuild.
flat-dts - .d.ts files flattener.
jspicl - Transpile JavaScript into PICO-8 Lua.
nodent - Transpile ES2017 async/await.
pegjs - Import PEG.js grammars as parsers.
purs - Compile PureScript.
regenerator - Replace async functions with ES5 Promise functions.
ts - Transpile with Babel, TypeScript, or both, while respecting Browserslist and TypeScript declarations.
typescript2 - Compile TypeScript v2.0+.

Workflow

Plugins which affect the Rollup workflow.

browsersync – Serves a bundle via Browsersync.
browserify-transform - Use Browserify transforms in a build.
command - Run commands and call functions when bundles are generated.
conditional – Conditionally execute plugins.
execute - Execute shell commands sequentially during a build.
html-entry – Allows use HTML Script Tags as entry points.
incremental - Recompile only changed modules in watch mode.
jscc – Conditional compilation and declaration of ES6 imports.
make - Build dependency files suitable for make.
off-main-thread - Use ES6 modules with Web Workers.
polyfill-node - A modern Node.js polyfill.
sourcemaps – Load external source maps from URIs.

Packages

Core Packages

Packages created and maintained by the Rollup organization.

@rollup/pluginutils - Functions commonly used by Rollup plugins.

Community Packages

deno-rollup - Use Rollup in Deno projects.
fruit - Build a Rollup boilerplate in seconds.
grunt-rollup - Grunt plugin for Rollup
rollup-starter-app - Create a bare-bones application using Rollup.
rollup-starter-lib - Create a bare-bones library using Rollup.
rollup-stream - A wrapper for streaming Rollup results.

Cannot add property _Ctor, object is not extensible

Im having problems rolling my package up and using it in a nuxt project

The following is my rollup.config.js

import fs from 'fs'
import path from 'path'
import vue from 'rollup-plugin-vue'
import alias from '@rollup/plugin-alias'
import commonjs from '@rollup/plugin-commonjs'
import replace from '@rollup/plugin-replace'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import minimist from 'minimist'
import css from 'rollup-plugin-css-only'
//import postcss from 'rollup-plugin-postcss'
import includePaths from 'rollup-plugin-includepaths'
import resolve from 'rollup-plugin-node-resolve'
import analyze from 'rollup-plugin-analyzer'

// Get browserslist config and remove ie from es build targets
const esbrowserslist = fs
  .readFileSync('./.browserslistrc')
  .toString()
  .split('\n')
  .filter(entry => entry && entry.substring(0, 2) !== 'ie')

const argv = minimist(process.argv.slice(2))

const projectRoot = path.resolve(__dirname)

const baseConfig = {
  input: 'src/entry.js',
  plugins: {
    preVue: [
      alias({
        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
        entries: [
          { find: '@', replacement: path.resolve(projectRoot, 'src') },
          {
            find: '@mixins',
            replacement: path.resolve(projectRoot, 'src', 'mixins')
          },
          {
            find: '@utilities',
            replacement: path.resolve(projectRoot, 'src', 'utilities')
          }
        ]
      }),
      includePaths({
        extensions: ['.js', '.vue']
      }),
      // css(),
      resolve(),
      //analyze(),
      commonjs()
    ],
    replace: {
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.ES_BUILD': JSON.stringify('false')
    },
    vue: {
      css: true,
      template: {
        isProduction: true
      }
    },
    babel: {
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    }
  }
  // experimentalDynamicImport: true,
  // experimentalCodeSplitting: true
}

// ESM/UMD/IIFE shared settings: externals
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
const external = [
  // list external dependencies, exactly the way it is written in the import statement.
  // eg. 'jquery'
  'vue'
]

// UMD/IIFE shared settings: output.globals
// Refer to https://rollupjs.org/guide/en#output-globals for details
const globals = {
  // Provide global variable names to replace your external imports
  // eg. jquery: '$'
  vue: 'Vue'
}

// Customize configs for individual targets
const buildFormats = []
if (!argv.format || argv.format === 'es') {
  const esConfig = {
    ...baseConfig,
    external,
    output: {
      file: 'dist/comps.esm.js',
      format: 'esm',
      exports: 'named'
    },
    plugins: [
      replace({
        ...baseConfig.plugins.replace,
        'process.env.ES_BUILD': JSON.stringify('true')
      }),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      babel({
        ...baseConfig.plugins.babel,
        presets: [
          [
            '@babel/preset-env',
            {
              targets: esbrowserslist
            }
          ]
        ]
      })
    ]
  }
  buildFormats.push(esConfig)
}

if (!argv.format || argv.format === 'cjs') {
  const umdConfig = {
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/comps.ssr.js',
      format: 'cjs',
      name: 'Components',
      exports: 'named',
      globals
    },
    plugins: [
      replace(baseConfig.plugins.replace),
      ...baseConfig.plugins.preVue,
      vue({
        ...baseConfig.plugins.vue,
        template: {
          ...baseConfig.plugins.vue.template,
          optimizeSSR: true
        }
      }),
      babel(baseConfig.plugins.babel)
    ]
  }
  buildFormats.push(umdConfig)
}

if (!argv.format || argv.format === 'iife') {
  const unpkgConfig = {
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/comps.min.js',
      format: 'iife',
      name: 'Components',
      exports: 'named',
      globals
    },
    plugins: [
      replace(baseConfig.plugins.replace),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      babel(baseConfig.plugins.babel),
      terser({
        output: {
          ecma: 5
        }
      })
    ]
  }
  buildFormats.push(unpkgConfig)
}
// Export config
export default buildFormats

The issue seems to be coming from vue

 Cannot add property _Ctor, object is not extensible                                                                                                                                                07:54:53  

  at Function.Vue.extend (node_modules\vue\dist\vue.runtime.common.dev.js:5123:67)
  at ensureCtor (node_modules\vue\dist\vue.runtime.common.dev.js:3588:12)
  at node_modules\vue\dist\vue.runtime.common.dev.js:3655:26
  at node_modules\vue\dist\vue.runtime.common.dev.js:338:10

rollup / awesome Goto Github PK

awesome's Introduction

Awesome Rollup

Resources

Plugins

Core Plugins

All-Purpose Awesome

Code Quality

CSS

Frameworks

Modules

Other File Imports

Output

Templating

Text Replacement

Transpilation

Workflow

Packages

Core Packages

Community Packages

awesome's People

Contributors

Stargazers

Watchers

Forkers

awesome's Issues

Recommend Projects

Recommend Topics

Recommend Org