Webpack seems to be including node_modules of node_modules into bundle? - javascript

So I have recently discovered that webpack seems to be including node_modules dependencies inside my top level node_modules dir into my actual bundle. For example, one dependency, example-dep depends on lodash, and so has a node_modules dir inside node_modules/example-dep, with lodash inside. Because example-dep imports one method from lodash, for some reason the entire lodash library is getting thrown into my bundle.
How can I fix this? Why are there nested node_module dirs inside my dependencies anyways? It's not like I am building those projects and trying to contribute to them, I literally just do npm install example-dir.

Those node_modules directories are installed because are listed as devDependencies of the package (in case you want to build yourself or test). To install solely the built file
npm install --production <package>
or better
npm install --only=prod
For more details check https://docs.npmjs.com/cli/install.

Related

How to tell npm to not to install any dependency when somebody installs my npm module?

I have created an NPM module which is already built and published. so when somebody installs it, my module doesn't really need any extra dependency to work properly as it is already built.
However, the current behavior is that when I install my module in some other repository it updates some other modules in package-lock.json
Is there a way to avoid this behavior as my module is already pre-built and doesn't need any dependency to work properly?
One way you can do this is create your project to be a nested project.
main-project
|- package.json
|- sub-project
|-package.json
Once you build your files in the main-project place them in sub-project whose package.json has no dependencies listed. You can then publish your inner sub-project to npm as a dependency free module.
That being said, I think the common practice is to include your dependencies as usual - as long as you export your built file correctly and the users import them correctly, it should not matter that your dependencies are installed or not - when they build, ideally they include only what they need (and not your project's dependencies) if all goes well.
NPM has something called optionalDependencies.
npm install package-name --save-optional
This command will save your package as an optional dependency.
Then you can use
npm install --no-optional
to prevent installing the optional dependencies.

how do i run jest test on a node_modules folder in react

I have added my own another project as a dependency. now it's on the node_modules folder now
how do I run test file on that folder when running the npm test
I don't know what your needs are but this is wrong.
If you want your project to be a dependency there are other safest ways to do that.
For example, with yarn, you can install a package from your computer as a dependency.
Consider the following example: you have your main-project, in which you want to include your sub-project.
So, in your main-project directory you can run yarn add ../path/to/sub-project and yarn will copy the code of your sub-project into the main-project. In this way you can keep the code splitted in two different reporitories.
A better way, if your sub-project is on github, bitbucket or whatever, is to give to yarn the url of your repo.
Yarn will automatically clone the repo into your node_modules every time that you'll run yarn. You can also specify a specific commit to use.
Read more about that in the yarn documentation.

Check which npm package installs lodash dependency

I am using webpack to build a production bundle for an application, and lodash, although I have not explicitly installed it and it does not exist in my package.json, is being inserted in my node_modules folder.
When I run npm uninstall --save-dev lodash (which effectively removes the lodash folder from node_modules), and rerun the build process, my bundle shrinks significantly. I would like to determine which package includes and requires the full lodash library.
How can I determine which of my many npm packages are requiring lodash?
Note:
I am using the packages lodash.debounce and lodash.throttle. But lodash.throttle only has a dependency of lodash.debounce and lodash.debounce does not have any other lodash dependencies.
I was looking for typescript package which is upgrading from 3.5.3 to 3.9.7 implicitly.
With the help of #Kenan I will make contribution:
When run as ll or la, it shows extended information by default.
Blockquote
https://docs.npmjs.com/cli/ls.html
npm [ls|la|list] [[<#scope>/]<pkg> ...]
In my situation typescript version ^3.5.3 in package.json but it was upgrading to 3.9.7 because of ^ character. npm is intalling this package's latest version of major version 3. Installed version 3.9.7 doesn't match in any typescript dependency in package.json files.

How to verify an object instance? instanceof and ....prototype.isPrototypeOf(...) are not reliable [duplicate]

Whenever I make projects, I have to download all dependencies of node modules. Without copying the node_modules, Is there anyway to share the central node_modules in multiple projects?
like the followings, I have to run many commands every time..
npm install gulp-usemin
npm install gulp-wrap
npm install gulp-connect
npm install gulp-watch
npm install gulp-minify-css
npm install gulp-uglify
npm install gulp-concat
npm install gulp-less
npm install gulp-rename
npm install gulp-minify-html
You absolutely can share a node_modules directory amongst projects.
From node's documentation:
If the module identifier passed to require() is not a native module,
and does not begin with '/', '../', or './', then node starts at the
parent directory of the current module, and adds /node_modules, and
attempts to load the module from that location.
If it is not found there, then it moves to the parent directory, and
so on, until the root of the file system is reached.
For example, if the file at '/home/ry/projects/foo.js' called
require('bar.js'), then node would look in the following locations, in
this order:
/home/ry/projects/node_modules/bar.js /home/ry/node_modules/bar.js
/home/node_modules/bar.js /node_modules/bar.js
So just put a node_modules folder inside your projects directory and put in whatever modules you want. Just require them like normal. When node doesn't find a node_modules directory in your project folder, it will check the parent folder automatically. So make your directory structure like this:
-myProjects
--node_modules
--myproject1
---sub-project
--myproject2
So like this, even your sub-project's dependencies can draw on your main node_modules repository.
One drawback to doing it this way is you will have to build out your package.json file manually (unless someone knows a way to automate this with grunt or something). When you install your packages and add the --save arg to an npm install command it automatically appends it to the dependencies section or your package.json, which is convenient.
Try pnpm instead of npm.
pnpm uses hard links and symlinks to save one version of a module only ever once on a disk.
If you have npm installed, you can install in your terminal with:
npm install -g pnpm
To update your existing installations (and sub-directories) use:
pnpm recursive install
Or use the shorthand command (leave off -r if you need to target only one directory)
pnpm -r i
One helpful note: You may find some rare packages don't have all their dependencies defined. They might rely on the flat node_modules file directory structure of npm or yarn installs. If you run into issues of missing dependencies, use this command to hoist all the sub dependencies into a flat-file structure:
pnpm install --shamefully-hoist
It's best to avoid using the --shamefully-hoist flag as it defeats the purpose of using pnpm in the first place, so try using the command pnpm i your-missing-package first (See pnpm FAQ).
I found a trick, just take a look at the Symbolic Links (symlinks) on Windows or Linux, it is working just like shortcuts but more powerful.
Simply you need to make a Junction for your node_modules folder anywhere you want. The junction is nothing but a short cut to your original node_modules folder. Create it inside your project folder where the actual node_modules would have been created if used npm install.
To achieve this you need at least one node_modules real folder then make a Junction to it in the other projects.
On Windows, you can either use the Command Prompt, or use an application. Using the Command Prompt gives you a bit more control, using an application is easier I suggest Link Shell Extension.
Main directory should look like this
node_modules
Project 1
Project 2
Project 3
Project 4
just open the file Project 1/.angular-cli.json
change the schema
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
to
"$schema": "./../node_modules/#angular/cli/lib/config/schema.json"
and don't forget to create node_modules empty folder inside your project directory
See also npm v7.0.0's support for workspaces
RFC
https://github.com/npm/rfcs/blob/latest/implemented/0026-workspaces.md
Documentation
https://docs.npmjs.com/cli/v7/using-npm/workspaces
By looking at some articles it seems that Lerna
is a good tool for managing multiple projects inside a single directory (monorepo). It supports modules sharing without duplicating the entire packages in every folder and commands to install them in multiple projects.
Javascript monorepos
Monorepos by example
Building large scale apps in a monorepo
pnpm is also a simple and efficient tool, which doesn't duplicate those modules which are already installed for other projects.
Let's assume that having a single node_modules it should contain all the packages for all applications. thus your apps will also share most of the unique package.json entries (just the name should change)
my idea would be to have a single root and multiple src level as below
root\package.json
root\node_modules
root\\..
root\app1\src\\..
root\app2\src\\..
the only issue you might face would be having a backup of json (or tsconfig) for any app and restore them when you work on it or setup your startup scripts to serve any app

Node npm why all the modules are installed in the root node_modules folder?

In the past when you installed npm module, all the modules that this module depends on were installed in this module folder under npm_modules folder, but now all the modules are installed in the root node_modules folder, why?
Maybe, you have updated your npm?
Cause, according to docs, they featured flattening in v3.5.0: "Only your direct dependencies will show in node_modules and everything they depend on will be flattened in their node_modules folders"
Global libraries
You can run *npm list -*g to see where global libraries are installed.
On *nix systems they are normally placed in /usr/local/lib/node or /usr/local/lib/node_modules when installed globally. If you set the NODE_PATH environment variable to this path, the modules can be found by node.
Non-global libraries
Non-global libraries are installed the node_modules subfolder in the folder you are currently in.
You can run npm list to see the installed non-global libraries for your current location.
You can verify by running npm config get prefix
Depending on that output you may want to change where global packages get installed.
Hope I was able to give insight and possible help.
Cheers!

Categories

Resources