- Notifications
You must be signed in to change notification settings - Fork750
Using JS components from Rails engines
See a discussion on this topic herehttps://github.com/rails/webpacker/issues/21.
Follow conventions ofrails/webpacker and have your engine export built JS as a NPM module.
To do so, addpackage.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 usingwebpack.config.js. (The configuration below processes CoffeeScript files, however it can be easily adjusted for.jsx etc.)
constpath=require('path');constwebpack=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 underpackage/src, however feel free to adjust the location as necessary. Similarly, the compiled JS will be stored inpackage/dist asindex.js entrypoint.
Build the components usingyarn build.
If open source, you can publish the package via NPM andyarn add @user/engine it to your main app. Alternatively you can simply store the built JS in the GitHub repo andyarn add git+https://github.com/user/engine.git the package from the repo in your main app.
In development, it is possible to use combination ofyarn link andyarn build --watch in the engine dir andyarn 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.