Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Using JS components from Rails engines

Tomáš Celizna edited this pageOct 25, 2017 ·3 revisions

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.

Clone this wiki locally


[8]ページ先頭

©2009-2025 Movatter.jp