โคNeoteric Plumbing Mishap

    rollup-plugin-esbuild
    TypeScript icon, indicating that this package has built-in type declarations

    4.9.1ย โ€ขย Publicย โ€ขย Published

    ๐Ÿ’› You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.


    rollup-plugin-esbuild

    npm version npm downloads

    esbuild is by far one of the fastest TS/ESNext to ES6 compilers and minifier, this plugin replaces rollup-plugin-typescript2, @rollup/plugin-typescript and rollup-plugin-terser for you.

    Install

    yarn add esbuild rollup-plugin-esbuild --dev

    Usage

    In rollup.config.js:

    import esbuild from 'rollup-plugin-esbuild'
    
    export default {
      plugins: [
        esbuild({
          // All options are optional
          include: /\.[jt]sx?$/, // default, inferred from `loaders` option
          exclude: /node_modules/, // default
          sourceMap: false, // by default inferred from rollup's `output.sourcemap` option
          minify: process.env.NODE_ENV === 'production',
          target: 'es2017', // default, or 'es20XX', 'esnext'
          jsx: 'transform', // default, or 'preserve'
          jsxFactory: 'React.createElement',
          jsxFragment: 'React.Fragment',
          // Like @rollup/plugin-replace
          define: {
            __VERSION__: '"x.y.z"',
          },
          tsconfig: 'tsconfig.json', // default
          // Add extra loaders
          loaders: {
            // Add .json files support
            // require @rollup/plugin-commonjs
            '.json': 'json',
            // Enable JSX in .js files too
            '.js': 'jsx',
          },
        }),
      ],
    }
    • include and exclude can be String | RegExp | Array[...String|RegExp], when supplied it will override default values.
    • It uses jsxFactory, jsxFragmentFactory and target options from your tsconfig.json as default values.

    Declaration File

    There are serveral ways to generate declaration file:

    • Use tsc with emitDeclarationOnly, the slowest way but you get type checking, it doesn't bundle the .d.ts files.
    • Use rollup-plugin-dts which generates and bundle .d.ts, also does type checking.
    • Use api-extractor by Microsoft, looks quite complex to me so I didn't try it, PR welcome to update this section.

    Use with Vue JSX

    Use this with rollup-plugin-vue-jsx:

    import vueJsx from 'rollup-plugin-vue-jsx-compat'
    import esbuild from 'rollup-plugin-esbuild'
    
    export default {
      // ...
      plugins: [
        vueJsx(),
        esbuild({
          jsxFactory: 'vueJsxCompat',
        }),
      ],
    }

    Standalone Minify Plugin

    If you only want to use this plugin to minify your bundle:

    import { minify } from 'rollup-plugin-esbuild'
    
    export default {
      plugins: [minify()],
    }

    Optimizing Deps

    You can use this plugin to pre-bundle dependencies using esbuild and inline them in the Rollup-generated bundle:

    esbuild({
      optimizeDeps: {
        include: ['vue', 'vue-router'],
      },
    })

    This eliminates the need of @rollup/plugin-node-modules and @rollup/plugin-commonjs.

    Note that this is an experimental features, breaking changes might happen across minor version bump.

    TODO: Maybe we can scan Rollup input files to get a list of deps to optimize automatically.

    Sponsors

    sponsors

    License

    MIT ยฉ EGOIST (Kevin Titor)

    Keywords

    none

    Install

    npm i rollup-plugin-esbuild

    DownloadsWeekly Downloads

    56,906

    Version

    4.9.1

    License

    MIT

    Unpacked Size

    29.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • egoist