I'm working on an NPM package right now.
The main code for the package (repo/src/maincode.js) has a few dev dependencies and a few dependencies needed to run it. When the user installs the npm package (through npm i) these dependencies will need be installed.
Now, that being said, I also want to create a react project that showcases this npm package, and have it live in the same repo, in an examples directory (repo/examples/react/app.js). This react app may have its own dependencies and dev dependencies, but I really don't want all of these to be forced onto the user when they're installing my npm package just to use in their projects.
How might I go about solving this problem? Is there a way to create a set of dependencies that are only installed if you are running a particular script, or running example code ?
You can give the examples directory its own package.json file and instruct folks who want to run the examples to cd into the examples directory and run npm i there. Any code in the examples directory that imports a module will look in its own node_modules before checking the node_modules in the parent directory.
The MarkoJS examples repository takes this approach and even makes it more granular. Instead of having a single package.json for the examples directory, there is a package.json for each separate example.
If you want, you can create a helper script in the main package.json for the user so they can do something like npm run build-examples and it will do the npm install for them as part of the process.
Related
I just started working with vscode and npm/git. Someone on my team added a package and I did a pull to get his latest changes which put that package in my package.json file. When I ran the project I got errors for a module not being found. Obviously I need to install that package locally. Do I simply use npm install w/no arguments to get it? Or do I install it manually myself with npm install and version info? I ask because I don't know if npm install w/no args will create a new package.json or cause any issues.
What is the correct way to get a new package installed that someone added in the repo?
npm install can be run as many times as you like, and is what you should be doing here :)
npm install's purpose is to get your node_modules folder up-to-date with whatever is written in package.json
So, if your colleague has changed package.json (by installing something new and pushing the change to git), you can just run the command again to get up-to-date.
Provided you haven't directly fiddled with any files in node_modules (this folder should be left alone), it is always safe to run npm install as many times as you like, even if nothing has changed.
When I run my Jenkins build for my React Native project it fails with the following errors:
Unable to resolve module `reactotron-core-client` from `/Users/nfib/Jenkins/Jenkins-Workspaces/ENGA/ENGAL/node_modules/reactotron-redux/dist/index.js`: Module does not exist in the module map
Execution failed for task ':app:bundleDevReleaseJsAndAssets'.
I followed the recommended rm -rf node_modules && npm install but I am not exactly sure that this would help since it seems to me like its a generic solution from the npm team.
React-Native version: 0.53.3 with "reactotron-react-native": "3.5.0", "reactotron-redux": "3.1.0",
Has anyone had similar issues to this? How can I ensure this does not continue to happen?
The issue is your Jenkins build server is unable to locate the reactotron-core-client module which is necessary to complete your Jenkins build. You can see this from your stack trace:
Unable to resolve module reactotron-core-client
The recommended solution from the npm team of:
rm -rf node_modules && npm install
is a generic solution because this command will remove your previous node_modules directory containing your project's dependencies and then reinstall the listed dependencies within in your project's package.json file. This may resolve issues stemming from your lock file as well as versioning issues if npm has been updated on your build server.
This solution may resolve your issue if all of your project's required libraries are listed within your package.json file. However, if the reactotron-core-client library isn't listed as a required dependency within your package.json file this problem will persist moving forward. Perhaps you could try the following:
npm i --save reactotron-core-client
as this will save and install the reactotron-core-client dependency for your project. By save I mean list this library as dependency within your package.json file.
Ideally, moving forward your best bet is to keep your package.json file up-to-date with your project's dependencies as well as installing dependencies prior to attempting a Jenkins build.
Hopefully that helps!
whenever I sync a react native project in GitHub , GitHub ignores the npm-modules folder to sync.I was wondering why GitHub has this approach, is there any problem to include this folder in our GitHub project? I know there is ignore line in GitHub for this folder and also I know I can easily install npm module but sometimes you need to change some parts directly from library and those modifications cannot be install again by npm install.
Github doesn't ignore anything, it is basically the same as git and it doesn't understand the structure of a react-native project.
The folder is ignored because it's in the .gitignore created by the react-native CLI.
To include nodes_modules in your git, just remove the line node_modules/ in your .gitignore and add/commit. You'll then be able to push your node_modules.
Uploading the node_modules folder is basically safe, but most people ignore it because you can generate it by npm install. That's why react-native put it in the default .gitignore.
See also Should "node_modules" folder be included in the git repository for whether you should include this folder or not.
Answer to the edit:
I know there is ignore line in GitHub for this folder and also I know I can easily install npm module but sometimes you need to change some parts directly from library and those modifications cannot be install again by npm install.
(It's not Github, it would be the same with another git server.)
If you decide not to include node_modules, and want to change a library, you can fork the library on Github and install your fork with npm: npm install <yourUsername>/<yourRepository> (if it's public).
I want to contribute to an open source React Component and I'd like to use a fork of the project in my webpack bundle.
I am using yarn and I tried to install my fork using
yarn add github:Startouf/react-coverflow
However, when webpack tries to compile my bundle, it raises weird errors
ERROR in ./~/react-coverflow/main.js
Module not found: Error: Can't resolve './dist/react-coverflow' in '/Users/Cyril/dev/MyApp/client/node_modules/react-coverflow'
Did I miss something ?
EDIT : when I use the released package from npm, the node module folder contains
LICENSE README.md dist main.js package.json
When I use my fork, it seems like the project isn't compiled and contains
LICENSE README.md package.json src webpack.config.js
Makefile main.js site test
Seems like I'm missing a step... I though doing yarn add with a github fork would automatically make a release but seems like I'm wrong ?
Unfortunately, using a repository directly as source can result in execution error. This is because it's not bundled at all, while the package expects an prebuilt version existing in dist. The bundling scripts are often executed before publishing releases to npm.
Some workarounds are:
execute the prepublish step in the target directory (this depends on
what the project uses)
of course, using the published version is the best. create your own package on npm and upload it.
References: npm issue
The package should be updated to include a prepare step.
A prepare step does exactly what you want in all cases.
https://stackoverflow.com/a/57503862/4612476
You can add the prepare script in package.json#scripts yourself that runs the build. Npm and Yarn will then automatically run the prepare script on install directly from GitHub. You can then treat it like any other package and it will always just workâ˘.
Don't forget the package.json#files section. See the linked answer for more details.
First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.