How to set up Ramda in Rollup with Babel (to use ES6 import)

Question

Before asking the question, I would like share the folder structure of my project first:

I am trying to use Ramda as a module in my project so that in my ./app/js *.js files I could do something like:

include map from 'ramda/src/map';

Basically I want to be able to easily import Ramda as a module so that I could access separate functions as shown above. I have ramda installed as a module inside the node_modules directory and I use rollup to build my js files written in ES6.

My rollup.config.js file looks like this:

import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import commonjs from 'rollup-plugin-commonjs';

export default {
    entry: 'app/js/main.js',
    dest: 'app/min/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        eslint({
            'exclude': [
                'app/css/**'
            ]
        }),
        babel(),
        commonjs({
            include: 'node_modules/**'
        })
    ]
};

I would really appreciate some advice on how to set it up properly to use it in ./app/js directory. Let me know if the question is not clear.

Thank you.

Answer 1

I was able to resolve the issue. With the same set up. All I had to do was change the rollup.config.js configurations. To be more detailed, I followed the steps described below:

1. Installed the plugin rollup-plugin-node-resolve to allow rollup serve up 3rd party modules to access the project files (such as Ramda in node_modules):

   npm install --save-dev rollup-plugin-node-resolve
   

2. Then, I had to add resolveas a dependency in the rollup.config.js as follows:

   On the top of the file placed:

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

3. Invoked resolve method inside the plugins array with the following parameters:

   //...code before
   resolve({
       jsnext: true,
       browser: true,
       main: true,
       preferBuiltins: false
   }),
   //...code after
   

4. Excluded node_modules from babel and included everything in commonjs to make sure that the modules are passed to the project as dependencies:

   //...code before
   babel({
       exclude: "node_modules/**",
       runtimeHelpers: false
   }),
   commonjs({
       include: 'node_modules/**'
   }) 
   //...code after
   

The rollup.config.js file looked like this in the end:

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

export default {
    entry: 'app/js/main.js',
    dest: 'app/min/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        resolve({
            jsnext: true,
            browser: true,
            main: true,
            preferBuiltins: false
        }),
        eslint({
            'exclude': [
                'app/css/**'
            ]
        }),
        babel({
            exclude: "node_modules/**",
            runtimeHelpers: false
        }),
        commonjs({
            include: 'node_modules/**'
        })
    ]

};

That worked for me in the end. In the ./app/js/ directory, in any file, I was able to import specific functions from Ramda as follows:

import {default as map} from 'ramda/src/map'; 

In addition, after going through the steps mentioned above, I was also able to install and integrate this amazing plugin that makes importing specific functions even easier -- babel-plugin-ramda.

Then, you can import specific functions in a simpler fashion:

import {map, curry} from 'ramda'

Thanks to the plugin, only specified functions will be provided.

Hope this helps anybody who has encountered the same issue or will help those who are going to encounter it in the future.

Cheers.