I'm working on a set of JavaScript projects and some of these have dependencies between them. I've chosen JSPM as my package manager - which is all fine. But during development I want to have the most efficient frictionless way of working with this.
What is the best way for me to be able to have a dependency from one project to another in a totally transparent way - when I work on it locally, I get to just jump between projects without having to do any packaging or installation of packages and at the same time package information with its dependencies being what is expected to be for release (public package) and builds on the CI??
With NPM I could be doing npm link- anything similar I can be doing??
You could use jspm link
Running jspm link in a module will publish it into the locally global "link" repository.
Running jspm install --link will then install a project from the "link" repository.
The only functional difference between npm link is that (for the moment at least) jspm link will need to be run every time your local code changes. This can be automated with a watch task (see jspm-cli#481).
Related
For a particular case in a Vue.js and JavaScript project a NPM package dependency have to be merge with the current JavaScript code base.
In that specific case, the NPM package should not be part of the nodes_modules folder anymore but rather be part of the JavaScript code itself.
In that case as both codebases will grow together in the future. (Independently from the original NPM package and not as a Fork)
How can I merge or fusion a NPM package to a Javascript project?
Additional Details:
The library that need to be merge is OIDC client. It's an open source project "Archived" by it's author (So no possibility to create Pull Request for a new release).
It is use to create a SSO for an internal project. This library has been retain by architect the for specific need of the project and there is no other option than this one.
There is no "internal package manager" available in this company
I don't want to host the fork on my personal Github and manage the package on NPM website
After many attempt to solve this problem, it turn out that Patch-Package do the best job to merge a dependency by simply patching over instead of forking.
Syntax is pretty simple and it integrate very well with NPM:
Installation: npm i patch-package
Modify the code of your dependency directly in node_modules folder
Run npx patch-package some-package where some-package is the name of your package to patch
https://github.com/ds300/patch-package
Documentation: https://github.com/ds300/patch-package
Is it possible to install a yarn dependency as an editable dependency?
I'm looking for something like python pip's:
pip install -e
For local development of a library. My goal is to see changes in a package I'm developing while simultaneously using it in another package.
You can directly edit the files in node_modules and changes there are reflected immediately, but also overwritten when yarn decides to update the module. Note, that some files need to be built first or might be a bit tricky to edit (minified / transpiled build artefacts). You can also install the module directly from GitHub, if this is easier for your development process.
Apart from that, there is no such thing as "editable" dependencies in npm / yarn.
I come from Java world and I'm used to code with Maven and Eclipse, which makes very easy to work with local dependencies as the IDE + M2Eclipse plugin is able to resolve dependencies from the workspace.
Now that I'm developing in JavaScript with NPM and VS Code, I find that you have to use manual options such as npm link + npm build --watch or npm pack + npm install <path> to work with local dependencies.
I'm developing an Angular application which codebase is split in different Git projects and npm packages, so we waste a lot of time testing local dependencies and also it is error prone.
I guess that this is caused by the different nature of JavaScript and Npm but, is there any plugin or option to ease local depevelopment in VS Code?
EDIT: I have seen this article about Yarn Workspaces and it looks like what I'm looking for... anything similar in npm? I see Lerna is an option but only for monorepos, I have separated Git repos for each library.
EDIT2: To clarify the problem, lets say I'm developing two Angular libraries, each on a different Angular workspace. Library A depends on library B. I use VS Code workspace to have these two Angular workspaces open at the same time and edit them together. If I change library B I have to build it and link it so that I can test the changes locally in library A before publishing. This is what "resolve dependencies from the workspace" solves in Eclipse + M2Eclipse in Java, the IDE just builds and links projects together. Thats what I'm looking for in VS Code + NPM in Angular.
EDIT3: New workspaces feature in NPM 7 looks promising, I will give it a try. Any thoughts about it?
I'd like to know how it works npm comparing to Maven (I come from a Java background) in terms of managing packages.
I have created a generic component using Angular 4, this component will be used in many projects. So, I have published it to our nexus registry and then, from the client projects I just import the package so that the package gets downloaded from the registry and everything works fine.
Now, for development, I don't want to be publishing to the registry every single time I do a modification in the generic component and rebuilding the clients.
I would like instead to do it like we do with Maven in Java, we install the artifact in our local repo, and the artifact will be picked up from the local repo before going to the global 'artifactory', but I see that when we install a module using npm, it gets installed inside node_modules folder inside the same project, so that the module is not available for any other project.
How should I do that? In other words, does npm keep a local repository where the installed modules are accessible to any other projects without the need of publishing to the global registry?
Thanks
use --global switch behind the npm install command to install the package of your choice global.
hope that helps
To make something available to the rest of the system's node package environment through npm, you can install it globally (which is local to your system) rather than locally (which is local to your project). You can see documentation for global-ness on installs in this part of the NPM documentation.
npm i -g package names here
npm install --global package names here
You can update your globally installed packages as you would a locally installed one as well when you need to.
npm update -g package names here
(or all of them without specifying)
npm update -g
See the full NPM documentation pages for more detailed flags, etc.
If you're hoping to use your own packages in a managed environment, you can either publish them as private modules or keep them in a VCS (mostly git) and reference them by the appropriate method for that VCS in your projects' package.json scheme through the dependencies block for github urls or more generally other git hosts, like
"dependencies": {
"myComponent": "user/repo#feature\/branch",
"otherComponent": "git+https://myGitHost.tld/.../projectName.git#commit"
}
As complexity of my web project is growing, I am realizing that downloading external JavaScript libraries manually, is error prone, time consuming and making project less maintainable over time.
Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.
But there is no clear help on how to configure bower with Visual Studio. Please help !
As complexity of my web project grew, I realized that downloading external JavaScript libraries manually, was error prone, time consuming and made project less maintainable over time.
Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.
So, I decided to take the plunge and get started with bower.
My project structure is now much cleaner and easy to maintain.
Here I am listing steps, we need to take to configure bower with Visual Studio.
Detailed steps to use bower are already available on http://bower.io/#install-bower. Here I will list steps, I took to
— install bower
— configure it with Visual Studio
— download a sample package -- ( AngularJS )
Bower requires node, npm and git for windows.
Before proceeding ahead, install the following
git for windows – install from https://msysgit.github.io/
node – install from https://nodejs.org/
npm is part of node (no need for any extra step)
Step# 1
Open Command Prompt and execute command
npm install -g bower
Above step may fail, if you are behind corporate proxy server. To add
proxy server settings in npm, execute following 2 commands from
command prompt
npm config set proxy http://proxy.myCompany.com:80
npm config set https-proxy http://proxy.myCompany.com:80
Once done, try installing
bower again
Step# 2
Navigate to your Visual Studio Project folder from Command Prompt.
Execute command
bower init
Include this file to Visual Studio project. You may have to click on
“Show All Files” from Solution Explorer menu.
Step# 3
Create a .bowerrc file using notepad with following configuration and save it in your Visual Studio Project folder
{
"directory": "scripts/bower_components",
"proxy":"http://proxy.myCompany.com:80",
"https-proxy":"http://proxy.myCompany.com:80"
}
Include this file to Visual Studio project.
Edit this file to set directory for packages to be downloaded by
bower
Add proxy server settings if you are working behind corporate proxy. Else remove the last 2 lines for proxy and https-proxy
Step# 4
To download AngularJs, execute command
bower install angular –save
This will add a line in bower.json.
Step# 5
Package will be downloaded under bower_components directory by default. (or under the directory mentioned in .bowerrc file)
Make to sure include the whole package directory in Visual Studio project.
Click on Show All Files
Right click on new downloaded package and click on “Include in
Project”
Step# 6
Finally add reference of new package to your index.html
I found that I also needed to configure git to use the proxy server :
git config --global http.proxy http://username:password#proxyURL:8080
After that bower worked in VS 2015