/ ReasonML

Publish a NPM Module with ReasonML and Rollup

What good is a compile-to-JS language if you can't write the next big NPM module with it? If you are the coder of prophecy that will bring us the next great React competitor with ReasonML, here's a guide to get you started writing a simple module with Rollup!

Install Rollup & ReasonML Tools

  1. Install Rollup

    npm i -g rollup
    
  2. Install BuckleScript

    npm install -g bs-platform
    

Create Project

  1. Initialize the ReasonML project

    bsb -init reft-pad -theme basic-reason
    
  2. Change the name of src/demo.re to src/main.re

Edit Configuration Files (yes we're still doing that in 2018)

  1. Change package-specs to ["es6"] in BuckleScript config

    // bsconfig.json
    {
      "name": "reft-pad",
      "version": "0.1.0",
      "sources": ["src"],
      "package-specs": ["es6"],
      "suffix": ".bs.js",
      "bs-dependencies": [],
      "namespace": true,
      "refmt": 3
    }
    
  1. Install the BuckleScript Rollup plugin

    npm i -D rollup-plugin-bucklescript
    
  2. Create a rollup.config.js file in the root of your project

    import bucklescript from "rollup-plugin-bucklescript";
    
    export default {
      input: "src/main.re",
      output: {
        file: "dist/main.bs.js",
        format: "cjs",
      },
      plugins: [bucklescript()],
    };
    
  3. Edit package.json's scripts and main props

    {
      "name": "reft-pad",
      "version": "0.1.0",
      "scripts": {
        "build": "rollup -c",
        "start": "rollup -c -w",
        "clean": "bsb -clean-world"
      },
      "main": "dist/main.bs.js",
      "source": "src/main.re",
      "keywords": ["BuckleScript"],
      "author": "",
      "license": "MIT",
      "devDependencies": {
        "bs-platform": "^2.1.0",
        "rollup-plugin-bucklescript": "^0.6.1"
      }
    }
    
  4. Run npm start to begin the build process

  5. Write something useful

    /* src/main.re */
    let reftPad = (str, _len, _ch) => {
      Js.log2(
        "You most likely installed the wrong package.",
        "This isn't left-pad, but It's written in ReasonML so that's cool too, right?"
      );
      str;
    };
    

Test & Publish

  1. Try it out in node

    ~/code/reft-pad
    ❯ node
    > const { reftPad } = require('./dist/main.bs.js');
    undefined
    > reftPad("StringToBePadded", 100, "🅱️");
    You most likely installed the wrong package. This isn't left-pad, but It's written in ReasonML so that's cool too, right?
    'StringToBePadded'
    
  2. (Optional) Publish it!

    npm publish # or not because I already own `reft-pad` 😛
    

TL;DR

Just clone FiberJW/reft-pad.

There ya go! You just wrote a NPM-worthy JS module with ReasonML. Push to GitHub and go get yourself some stars! 💫