Webpack vs. Rollup vs. parcel.js vs. typescript bundles

README.md

The problem:

I need to bundle several files into AMD bundles to be run in a sandboxed environment whith communication provided by an exernal module. Both rollup and webpack can do this, however

• Rollup relies on a commonjs bundler which does not understand ES6 imports (without explicit configuration, that is)
• Rollup does not clearly delineate separate modules into their own scope. Instead it relies on cleaver re-nameing of resources
• Rollup is newer
• Webpack re-capitulates the node requrie and as result Webpack bundles are larger than rollup and less clear how the code works
• Webpack uses Function() which is tantamount to eval() which is, you know, evil, and would cause lint-based "don't-try-to-escape-the-sandbox" tests to fail.

Both of the libraries have:

• a JS API
• source maps
• compile to AMD
• bundle node module sources

other packages considered

• parceljs -- too focused on the "zero config" thing and didn't support un-minified bundles (for inspeciton purposes) or external modules
• typescript bundles - these bundle your code but not your dependencies...

Example-file.ts

// this requires `namedExports` to work with rollup:
import {join } from "lodash";

// this works with both webpack and rollup and yields a smaller package:
// import join from "lodash/join"; 

// this works everythere, of course: 
// import _ from "lodash"

// this works everwhere because it's an external module and isn't bundled by webpack or rollup:
import { BigNumber} from "bignumber.js";

export default function component(x:string[]) {
    // bar(x[0])
  return join(x.map(y => new BigNumber(y).toFixed(5)));
}

rollup.config.js

import typescript from 'rollup-plugin-typescript';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

// ultimately the bundel should pass eslint...
// import tslint from 'rollup-plugin-tslint';

export default {
    input: './src/index.ts',
    external: ["bignumber.js"],
    output: {
        file: 'bundle/rolled.js',
        format: 'amd',
        sourcemap: true,
        sourcemapfile: true,
        file: 'bundle/rolled.js',
    },
    plugins: [
        typescript(/* defers to the typescript config*/),
        resolve({
            jsnext: true,
            main: true,
            browser: true
        }),
        commonjs({ 
            include: 'node_modules/**',
            namedExports:
            {
                "lodash": ["join"],
            }
        }),
    ]
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    devtool : 'cheap-source-map',
    externals: {
        "bignumber.js": "bignumber.js",
    },
    sourcemap: true,
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        library: "hi there",
        libraryTarget: "amd",
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
};