proper way to initialize a bucklescript project for the browser

Question

I can create, compile and run a bucklescript project with the following commands

bsb -init new-project
cd new-project
npm run build
node ./src/demo.bs.js

However, I'd like to use the definitions in the generated demo.bs.js from a script embedded in an html file. The generated js contains a call to require which doesn't work in the browser. I could probably make it work with browserify or something, but I guess there must a proper way to set up a bucklescript project to target web apps, right?

score 1 · Accepted Answer · answered Feb 23 '18 at 11:47

BuckleScript outputs JavaScript modules, by default in commonjs format (the node module format), but can also be configured to output amdjs or es6 modules. What you do with them from there is entirely up to you. You can use browserify, rollup or parcel, but most people use webpack. Here's a simple webpack config that should work for you:

const path = require('path');

module.exports = {
  entry: './src/demo.bs.js',
  output: {
    path: path.join(__dirname, "public"),
    filename: 'bundle.js',
  },
};

Put this in ẁebpack.config.js in your project root, then run:

npm install webpack
webpack

You can then include ./public/bundle.js in your html file.

Note: If yu're using reason-react, the react template will set all this up for you:

bsb -init new-project -theme react

proper way to initialize a bucklescript project for the browser

1 Answers1