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
.
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.
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.
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.
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.
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/**'
})
]
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With