-
Notifications
You must be signed in to change notification settings - Fork 385
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes related to RoR 5.1 optionable Webpacker #452
Comments
We can still use regular gems with assets together with the webpacker option in rails 5.1? Let me check. I am not sure it makes no sense to package cocoon.js in npm? (imho cocoon is not a javascript library, it makes no sense without the rails/ruby interaction). |
Yes, assets pipeline can be run together with webpacker. |
Asset pipeline can be run together with webpacker, but many people (myself included) are trying to migrate entirely to webpack from sprockets. It'd be great provide a way to use cocoon without relying on the asset pipeline. |
@nathanvda I've just tried to get cocoon working with webpacker but in the end I had to give up.
I could go through and rewrite Hopefully this is helpful to someone! |
Thanks @iainbeeston , I managed to import cocoon by just copying it to my project at work, and having a global jquery object present. Seems to work well. I have this hack to have a global jquery object, which seems to be a requirement of many libraries by the way:
There are other ways to do this too, but I found this the simplest to understand. |
rails webpacker:install:erb // config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const erb = require('./loaders/erb')
const webpack = require('webpack')
environment.loaders.append('erb', erb)
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
)
module.exports = environment # config/webpacker.yml
default: &default
# Search jQuery in node_modules of the application and not in the cocoon directory
resolved_paths: ['node_modules/jquery/dist'] // app/javascript/packs/application.js.erb
import "<%= File.join(Gem.loaded_specs['cocoon'].full_gem_path, 'app', 'assets', 'javascripts', 'cocoon') %>" |
@vill Looks like right solution, but I still have unresolved I had everything by your instruction |
This was clean and worked well for us: https://github.com/joerodrig/cocoon-js (https://www.npmjs.com/package/cocoon-js) |
Yes indeed probably a good idea. There are now already two packages on npm for cocoon |
If I get a moment this weekend I’ll try to investigate
|
This is how the // package.json
{
"main": "lib/assets/compiled/rails-ujs.js",
"files": [
"lib/assets/compiled/*.js"
]
} Looks like FWIW, here's how I solved loading javascript from gems that aren't available on npm (applicable to more than just cocoon): // config/webpack/environment.js
environment.plugins.prepend('GemAssetsPlugin', require('./plugins/gem-assets')) // config/webpack/plugins/gem-assets.js
const { exec } = require('child_process')
module.exports = {
apply(compiler) {
compiler.hooks.beforeRun.tap('GemAssetsPlugin', (compilation) => {
exec('mkdir -p vendor/frontend/js')
exec('cp $(env -u DEBUG bundle show cocoon)/app/assets/javascripts/cocoon.js vendor/js')
return true
})
}
} # config/webpacker.yml
resolved_paths: ['vendor/js'] |
It works, but I want to point out:
must be:
Then you can: // /javascripts/packs/application.js
import 'cocoon-js' |
in /javascript/packs/application.js |
As the latest person to stumble through this, let me post what appears to be working for me, based on what everyone else is doing. I've got jQuery mixed in here, since obviously that's used by Cocoon. Should I gitignore that vendor folder that gets created? I feel like that shouldn't be committed... // config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('GemAssetsPlugin', require('./plugins/gem-assets'))
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment // config/webpack/environment.js
environment.plugins.prepend('GemAssetsPlugin', require('./plugins/gem-assets')) // config/webpack/plugins/gem-assets.js
const { exec } = require('child_process')
module.exports = {
apply(compiler) {
compiler.hooks.beforeRun.tap('GemAssetsPlugin', compilation => {
exec('mkdir -p vendor/js')
exec(
'cp $(env -u DEBUG bundle info cocoon --path)/app/assets/javascripts/cocoon.js vendor/js'
)
return true
})
}
} # config/webpacker.yml
additional_paths: ['vendor/js'] |
In principle it should be, but I didn't bother to .gitignore it myself. The cocoon JS hasn't changed in over a year so it doesn't really matter one way the other. |
HI,
Rails 5.1 give ability to use webpacker gem to manage javascript libraries. But this management is completely out of Rails so it cannot see
gem cocoon
.Can You, please, add
package.json
file and build an NPM package of cocoon?Related Issues in other project
ifad/data-confirm-modal#53 and
rails/webpacker#57 (comment)
The text was updated successfully, but these errors were encountered: