Using JS components from Rails engines

See a discussion on this topic here https://github.com/rails/webpacker/issues/21.

Follow conventions of rails/webpacker and have your engine export built JS as a NPM module.

To do so, add package.json in your engine along these lines:

{
  "name": "@user/engine",
  "version": "1.0.0",
  "description": "…",
  "main": "package/dist/index.js",
  "files": [
    "package"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/user/engine.git"
  },
  "author": "…",
  "license": "…",
  "homepage": "…",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@rails/webpacker": "^3.0.1",
    "babel-preset-react": "^6.24.1",
    "coffee-loader": "^0.8.0",
    "coffeescript": "^2.0.1",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpacker-react": "^0.3.2"
  },
  "devDependencies": {
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack-dev-server": "^2.8.2"
  }
}

Configure webpack using webpack.config.js. (The configuration below processes CoffeeScript files, however it can be easily adjusted for .jsx etc.)

const path = require('path');
const webpack = require('webpack')

module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        use: ['babel-loader', 'coffee-loader']
      }
    ]
  },
  entry: './package/src/index.js',
  output: {
    library: '@user/engine',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    filename: 'index.js',
    path: path.resolve(__dirname, 'package/dist')
  },
  resolve: {
    extensions: ['.coffee', '.js']
  }
};

This configuration assumes source code under package/src, however feel free to adjust the location as necessary. Similarly, the compiled JS will be stored in package/dist as index.js entrypoint.

Build the components using yarn build.

If open source, you can publish the package via NPM and yarn add @user/engine it to your main app. Alternatively you can simply store the built JS in the GitHub repo and yarn add the package from the repo in your main app.

In development, it is possible to use combination of yarn link and yarn build --watch in the engine dir and yarn link @user/engine in the main app dir to have the engine's JS code automatically rebuilt on update and changes visible in the main app.