I created a new project with Rails 5.1 and I want to use webpacker to manage my react dependencies. The problem is after installing webpacker it creates a huge 130Mb+ dir node_modules with every possible node_package. This does not make sense as default behavior. How can I configure Webpacker to only keep the packages I'm actually using. I have searched for this issue in every way I could and I did not see any answers that made sense
Install what you need via yarn add, they will be listed in your package.json. Once you run assets:precompile (which will also run webpacker:compile) or just webpacker:compile, the public folder will be populated the compiled assets you are going to need to run the app.
Like Tamer says, node_modules should be in your .gitignore file. In dev, you will see all the node modules due to existing dependencies but that doesn't mean they are going to be used.
In summary, don't worry and rely on yarn.
Related
I'm working with a Rails application, using Webpacker to bundle assets. I'm using a particular library I've installed via yarn whose code needs to be transpiled in my project. I'm trying to do this by modifying the paths that are ignored by Webpack/babel-loader within my config/webpack/environment.js file.
const { environment } = require('#rails/webpacker');
// Ignore all node_modules packages EXCEPT `a-random-third-party-package`:
babelLoader.exclude = /node_modules\/(?!(a-random-third-party-package))/;
module.exports = environment;
This is NOT working, though. For example, the JavaScript classes and static properties that exist in the third party package aren't transpiled at all in my bundle. But when I copy that same code into my own JS files, it's transpiled as expected.
How can I get this package to transpile like I want?
Solved! I had been using yarn link to work with this package separately and test it within this Rails application. For whatever reason, this was interfering with the build step, preventing it from being properly transpiled.
If you run into this yourself, verify that none of your dependencies are yarn link-ed, and if they are, run yarn unlink so you can locally test Webpacker without issues.
I don't have much experience with new npm/yarn/webpacker crazyness in Rails 5. So what's the correct way to bundle assets plus their dependencies (like bootstrap 4, for example).
Before it was just a matter of moving entire downloaded js library in /assets and calling it a day.
Let's assume I want to include this datepicker in my Engine: https://github.com/chmln/flatpickr
How do I set it up? Thanks.
Did you get anywhere with this?
It seems there needs to be a solution where the host application can pull dependancies from an engines or gems YARN package.json.
That way it could merge all YARN dependancies together with its own and check if there are no conflicts, if not - Happy days.
A possible workaround is to copy the dependancies over from node_modules into the asset pipeline. This is pretty much the same as what was done previously apart from now rather than looking through each file to find the dependancies and there versions you can just look in package.json.
I create a yeoman generator to help myself with front end development.
The problem is, our development environment, framework, plugins are changing so fast...
I have to update dependencies in the package.json in yeoman generator's template directory.
But, usually the package.json in yeoman generator is renamed like _package.json, because of the generator, so I cannot do just npm update.
So, I'll ask you what is the best way to update node modules in _package.json.
Thanks.
For what it's worth, npm update just update dependencies to the latest version matching your package.json dependencies semver ranger. It won't update the file itself.
To know which dependencies are outdated, you can either use npm outdated or a tool like david.
What I usually do with my project is to run one of these tools on a newly generated project. This might not seems ideal, but it's actually the best way to go because:
You ensure your generator is still working (things can break overtime if we're not careful)
You'll be able to test the new versions against your project and see where you need to fix your code so it work with latest release and breaking changes.
Also, npm using semver to set versions, this mean you only need to bump dependencies when a new major version is released. This tends to not happen all that often.
#Simon
Thank you for mention that I misunderstood the behavior of npm update.
Now I do the following step to update _package.json in generator.
create project from the generator yo generator-name
update package.json use npm-check-update.
ensure everything goes ok.
copy package.json into _package.json in generator
But I want to do this like
automatically update package.json in generator
start new project
ensure everything goes ok
I'm not sure this is the best way though...
I'm trying to clean start karaf on Windows using clean option.
It does delete data directory with bundles cache but it copy new bundles into data directory from system directory not local maven repository. But system directory has stale jars in comparison to local maven repository which cause karaf to start with stale bundles.
Is this a 'feature' of clean option? Am I missing something? How could I start Karaf with latest code from maven repo not dealing with file system?
You can't as the system directory is per default the one to use.
The clean does mean to clear up bundles in a awkward state and is only rarely used. Sometimes this happens if you start and stop the karaf container very close to each other then bundle might be in an incomplete state and since those bundle state is kept only a clean will help. Another way of cleaning is to delete the data folder.
So what you look like to be intending is to update certain bundles that are installed from the systems folder. For that you need to install the never version cause Karaf nows which versions are in the systems folder, those bundles are defined in the framework feature which is the basic feature to be used by Karaf itself.
If you have your own bundles in the system folder there is no way of updating those as those are regarded to be bootfeatures. In case you want to update those you'll need to make sure those features aren't boot features anymore and after that just do install the never versions of your bundles and uninstall the older ones. This can be done with the command shell.
One side note, it's usually best to ask those questions on the users mailinglist of Karaf, you get more people to answer your questions there.
When looking at bower.json, I assume putting things in devDependencies is the recommended way to deal with things such unit testing dependencies. I'd like to use qunit as my testing framework, but I guess it should apply to other frameworks as well.
The problem I have is that when I put qunit in devDependencies, it doesn't get picked up when building vendor.js. That's expected, but then how do I go with asking brunch to include it? Obviously, I'd prefer to have test-vendor.js where I'd have dependencies + devDependencies, while keeping devDependencies out of vendor.js.
I have this in config.coffee:
exports.config =
# See http://brunch.readthedocs.org/en/latest/config.html for documentation.
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(bower_components|vendor)/
'test/javascripts/test.js': /^test\/(?!vendor)/
'test/javascripts/test-vendor.js': /^test\/(?=vendor)/
Obviously, the last line wouldn't pick up any bower_component items as-is. Any suggestions here?
I saw this ticket:
https://github.com/paulmillr/read-components/pull/7
but it looks it's still up in the air.
This SOq:
Is it possible to split production and development Bower components?
suggests there's no way to do it from bower side at the moment.
Until this is implemented natively in Brunch, you can hack around it like this, so long as you aren't using Windows:
Add quint and other test dependencies to devDependencies in bower.json. They will now be managed under bower_components.
Add a symlink for each test dependency from your test/ directory to the relevant file under bower_components, eg:
ln -s ../bower_components/qunit/qunit.js test/
The dependencies will then be included in your unit-tests.js.
When brunch supports devDependencies, you can delete the symlinks.
See Ignore directories in brunch production build
You should be able to do something like:
overrides:
production:
conventions:
ignored: /[\/\\]_|bower_components[\/\\]qunit/
And then generate your production build with brunch b -P (brunch build --production)