calvinmetcalf / rollup-plugin-node-builtins

138 stars 40 forks source link

Creating a browser bundle that depends on Node.js built-in module ('events'). You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins #40

Closed fab1o closed 6 years ago

fab1o commented 6 years ago

What's the solution to have the external events module code included in the bundle for browsers in iife or umd format?

I tried using browserify-compatible version with no luck.

Creating a browser bundle that depends on Node.js built-in module ('events'). You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins
No name was provided for external module '...\node_modules\rollup\dist\rollup.js' in options.globals – guessing 'events'
// src/index.js

import EventEmitter from 'events';

const emiter = new EventEmitter();

export function emit() {
    emiter.emit('HEY');
}

export default {};
// gulpfile.js

    const bundle = await rollup.rollup({
        input: './src/index.js',
        external: ['events'],
        plugins: [
            multiEntry(), // rollup-plugin-multi-entry
            nodeResolve({ // rollup-plugin-node-resolve
                module: true,
                browser: true,
                preferBuiltins: false
            }),
            commonjs({ // rollup-plugin-commonjs
                include: 'node_modules/**'
            }),
            globals(), // rollup-plugin-node-globals
            builtins(), // rollup-plugin-node-builtins 
            babel({ // rollup-plugin-babel
                babelrc: false,
                exclude: 'node_modules/**',
                runtimeHelpers: true,
                externalHelpers: false,
                plugins: [
                    'external-helpers',
                    'transform-runtime'
                ]
                presets: presets.map((preset) => {
                    if (preset === 'env') {
                        return ['env', {
                            targets: {
                                browsers: ['last 2 versions']
                            },
                            modules: false,
                            loose: true
                        }];
                    }
                    return preset;
                }),
            })
        ]
    });

    return bundle.write({
        file: 'ouput.js',
        format: 'iife',
        sourcemap: false,
        name: 'window',
        extend: true
    });
// output.js

this.window = this.window || {};
(function (exports,EventEmitter) {
'use strict';
EventEmitter = EventEmitter && EventEmitter.hasOwnProperty('default') ? EventEmitter['default'] : EventEmitter;

var emiter = new EventEmitter();

function emit() {
    emiter.emit('HEY');
}

exports.emit = emit;

}((this.window= this.window|| {}),EventEmitter));

Browser error: Uncaught ReferenceError: EventEmitter is not defined

calvinmetcalf commented 6 years ago

the external property you're setting in the config means 'don't include events' which is why events arn't being included, it should work if your remove that

fab1o commented 6 years ago

That works, thanks! I was thinking the opposite about the external property.