Npm / Yarn : how to filter files copied from local path dependencies? - npm

I have a weird behavior in a phoenix project.
The project defines dependencies to local projects:
"dependencies": {
"phoenix": "file:../../deps/phoenix",
"phoenix_html": "file:../../deps/phoenix_html",
...
Both npm install and yarn install are able to locate the projects and copy the files in "node_modules". However :
npm install only copies a subset of the "deps/phoenix" folder (mostly .js files)
yarn install copies the whole folder (both .js and .ex files)
How does npm knows which files to copy ? Is it simply a convention ? I did not find anything particular in "deps/phoenix/package.json", for example.
Otherwise, is there a way to have yarn behave the same as npm ?

Related

Where to install bulma-start through npm in project

I have created a css folder in my public folder of my project. Is it handy to npm install bulma-start directly in the css folder? Currently project links to Bulma via CDN link but I want to install it on my local machine so the project can run it locally. Can you please recommend the best procedures for installing all dependancies correctly?
Using bulma-start is bit different as compared to working with other npm packages so here are the steps I've followed to work with bulma-start.
Create another folder say temp.
Initiate npm package there by using npm init
Install bulma-start by using npm install bulma-start.
Copy paste all the files inside the node-modules to wherever you want to work with this project.
Again do npm install to install the dependencies of bulma-start i.e. bulma etc.
Feel free to delete temp.
Is it handy to npm install bulma-start directly in the css folder?
bulma-start is a complete package to start working, this includes the whole js, sass, CSS folders and scripts to start working. So bulma-start should be considered as the parent folder of your project.

Forking and changing an NPM package

I have been using an NPM for angular-4 which support drag and drop objects (ng2-drag-drop). I found a missing functionality and decide to add it to the package.
What I did is forking the original project and adding my changes. after commit/push to my git I then used the following command to install my NPM :
npm install https://github.com/..... --save
the NPM installed successfully however when looking in my node_modules I see that the source files are missing and I have only the root directory including the package.json and some other files . any source files are missing.
I then tried to instal the NPM directly from the author git so instead of running :
npm install ng2-drag-drop --save
I used
npm install https://github.com/ObaidUrRehman/ng2-drag-drop.git --save
and I had the same issue with my fork.
Why the installation is different between the author git and the named package ? isn't it taking the files from the same location ? if no, what should I do to make it work ?
The reason you are not able to see the src folder is
If you see the git repo you will find two files
gitignore & npmignore.
In that npm ignore file you will find the src has been ignored to be prevent it from being added to the package when running npm commands .
Keeping files out of your package
Use a .npmignore file to keep stuff out of your package. If there's no
.npmignore file, but there is a .gitignore file, then npm will ignore
the stuff matched by the .gitignore file. If you want to include
something that is excluded by your .gitignore file, you can create an
empty .npmignore file to override it. Like git, npm looks for
.npmignore and .gitignore files in all subdirectories of your package,
not only the root directory.
You need to overwrite these settings to be able to get src contents in node modules when you do npm install

npm 5 install folder without using symlink

Before publishing my node library, I could use the advice the npm documentation wrote about:
To test a local install, go into some other folder, and then do:
cd ../some-other-folder
npm install ../my-package
Prior to version 5 of npm, I had no problem as it produce what I expected, ie a folder with the output of what I will publish.
However, using npm 5, it now creates a symlink to my local project as described in the npm documentation:
npm install :
Install the package in the directory as a symlink in the current
project. Its dependencies will be installed before it's linked. If
sits inside the root of your project, its dependencies may be
hoisted to the toplevel node_modules as they would for other types of
dependencies.
How can I use the "old" way to install local project? Or is there a new way to check if my library is correct?
Thank you.
Use npm pack + npm install (as suggested by install-local package)
npm pack <path-to-local-package>
npm install <package-version.tgz>
This will effectively copy your local package to node_modules.
Note that this will package only production relevant files (those listed in the files section of your package.json). So, you can install it in a test app under the package own directory. Something like this:
my-package
package.json
test
test-app
package.json
node_modules
my-package
Assuming that test dir is not included in the files in my-package/package.json.
This works the same way with npm 5 and older versions.
I wrote npm-install-offline which allows you to install npm packages from a local repository or folder. By default it copies the folder on install but you can also choose to symlink.
https://www.npmjs.com/package/npm-install-offline
npx npm-install-offline ../some-package
Or
npx npm-install-offline my-npm-package --repo ./my-offline-npm
It also will install the package dependencies which npm does not do with local packages.

configure a different path per client deps in npm

In an asp.net core project all the client files must to be copied under the approot directory to be deployed correctly: jspm let you define a proper directory for client deps, but with npm I have to copy the files from node_modules
directory to the approot\node_modules using a gulp task.
Since I'm not interested in filtering or manipulating the files before the deploy, but I just what that the files in the installed module are deployed, there is some way to do this without use gulp ?
You can use npm to do that. Add a script to your package.json:
"scripts": {
"copy": "xcopy from to"
}
Then you can call npm run-script copy to have it executed. I used xcopy as an example, you can use whatever you like. There is some more documentation about scripts in npm.

How to shrinkwrap npm modules without local dependencies

I tried to maintain package.json with the list of node modules dependencies. when I call npm install it installs the node modules.and generates a folder for it in my app. I call the npm shrinkwrap. But this generates the dependency on the local node module
"dependencies": {
"async": {
"version": "0.2.5",
"from": "async#0.2.5",
"resolved": "https://registry.npmjs.org/async/-/async-0.2.5.tgz"
},
when I upload the app to the appfog server it can install from the npm-shrinkwrap.json. So Ideally I want to remove the node modules folder and just pass the shrinkwrap.json file. But it has this "from". I had in the past generated the shrinkwrap & it didn't have the "from" field in there.
How to generate without "from"/ can I just get a shrinkwrap file from package.json. so my app will be leaner. I can maintain all the node module globally.
Thanks
I'm a bit confused by your question.
Shrinkwrap does not install, package, upload or do anything to your dependencies.
All it does is scan your installed node_modules and record the versions (recursively) into a file. Invoking npm install after that file is defined becomes repeatable, which is a principle of software engineering.
"from" was introduced a few months back. The npm shrinkwrap command seems to set it to the URL from which a module was installed. This is probably for portability. npm install takes a module name, consults a registry (whose URL is configurable as an npm config setting) and installs it. I could take the same package.json and npm-shrinkwrap.json, put them on another machine and theoretically get a different result if that machine's npm config settings point it to a different registry. Therefore, embedding the resolved URL in the shrinkwrap file adds an additional level of repeatability to npm install
See the npm config man page for details of setting the registry parameters.
According to npm issue 3145 on github, the "from" setting is known to cause backwards-compatibility issues with pre-1.2.x npm systems. Upgrading is the only resolution.
https://github.com/isaacs/npm/issues/3145
I think that you are looking for shrinkpack: https://www.npmjs.com/package/shrinkpack
from the doc:
Shrinkpack complements the npm shrinkwrap command by maintaining a node_shrinkwrap directory in your project, containing the exact same tarballs that npm install downloads from https://registry.npmjs.org.
The rest of the npm install process is exactly the same. The only difference is that no network activity is necessary when installing and building your project. The node_shrinkwrap directory can be ignored in your editor (much like is done with the node_modules directory) but is instead checked into source control.