Thursday, 9 May 2019

Using jQuery DataTables with Rollup.js

Ok I'm using the tool rollup for the first time and I love how small it is making the code. Tree shaking is great. However, I'm having some trouble getting it to include everything correctly. I tried having a single entry point, exp.js, where I export things from various files like this:

export {
    dashboardCharts
} from './dashboard.js';

my rollup.config.js looks like

export default {
    // tell rollup our main entry point
    input: [
        'assets/js/exp.js',
    ],

    output: {
      name: 'helloworld',
      file: 'build/js/main.js',
        format: 'iife'
        // format: 'umd'
    },
    plugins: [
        resolve({
            // pass custom options to the resolve plugin
            customResolveOptions: {
              moduleDirectory: 'node_modules'
            }
        }),
        multiEntry()
        // terser(),
    ],
};

The file dashboard.js includes the datatables library, so datatables gets included in the bundle main.js. However, datatables tests whether it should take the commonjs path or not by testing

else if ( typeof exports === 'object' ) {
    // CommonJS
    module.exports = function (root, $) {

and I'm trying to execute this in the browser, so I don't want the commonjs path. Rollup's top level scope is declared like

var helloworld = (function (exports) {

so exports ends up being an empty object, the browser tries to execute the commonjs path and we get a "module is not defined" error.

I feel like I'm really close, but I'm missing a simple solution here. I also tried doing a umd format instead of iife, but it didn't help. Is there a different version of datatables I should be using?



from Using jQuery DataTables with Rollup.js

No comments:

Post a Comment