Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make rollup expand `require` statements?

I'm trying to wrap my head around rollup.

I'm using a library that generates a file with this format: IIFE with a require statement. For example

// index.js
(function() {
  const myThing = require('./thing');
})()

//thing.js
module.exports = { a: 3 };

I'm trying to use rollup with a bunch of other things, but my bundle.js ends up looking like this:

(function () {
  var myThing = require('./thing');
})();

What do I need to do so that my bundle.js ends up looking like this?:

(function () {
  var myThing = { a: 3 };
})();

In case there is a problem with my setup, here is the rollup.config.js that I'm using:

var babel = require('rollup-plugin-babel');

export default {
  input: 'index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**'
    })
  ]
};

These are the packages I have installed:

"babel-core": "^6.26.3",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.6.1",
"rollup": "^0.58.2",
"rollup-plugin-babel": "^3.0.4"

And my babel config:

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "external-helpers"
  ]
}

To build, I'm just calling rollup -c.

like image 924
nachocab Avatar asked Apr 28 '18 22:04

nachocab


People also ask

Can I use both import and require?

Cases where it is necessary to use both “require” and “import” in a single file, are quite rare and it is generally not recommended and considered not a good practice. However, sometimes it is the easiest way for us to solve a problem. There are always trade-offs and the decision is up to you.

Is rollup better than webpack?

The big winner is Rollup which represents the next generation of build tools in terms of its performance (build time), intermediate configuration (less complicated than webpack but more involved than Parcel), and optional but out-of-the-box features likes source maps, and not using a . babelrc.

What is Rollupjs?

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

What is CJS and ESM?

ES modules are the standard for JavaScript, while CommonJS is the default in Node. js. The ES module format was created to standardize the JavaScript module system. It has become the standard format for encapsulating JavaScript code for reuse.


1 Answers

Okay, I figured it out. All I had to use was use the CommonJS plugin:

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

export default {
  input: 'index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**'
    })
  ]
};
like image 83
nachocab Avatar answered Sep 19 '22 13:09

nachocab