I am developing a library in tandem with a project. The project has the library as a dependency. Both are on my local machine and I have added the path to the lib's git file to the project's bower.json:
"devDependencies": {
"example": "/Users/me/Documents/path/to/example/.git"
}
This works fine, but every time I update the lib I have to:
Add and commit changed files in lib
Update the dependency in bower
How can I streamline this process? Is there a way to have the project always use the lib in its current state?
The URL you are currently using for the dependency is identified by Bower as a local git repository and so Bower uses the Git file system resolver. This means that your changes must be committed to the repository for Bower to resolve them (The resolver is checking out changes from the local repository).
You can change the URL to something in the form of: "example": "/Users/me/Documents/path/to/example/". You can use a path to a directory, file or an archive.
This will make Bower use the file system resolver instead which will simply copy the library files (according to the bower.json inside the folder).
Not sure if you can avoid the step of updating the dependency in Bower.
Related
I am working on a VueJS web app. One of the modules it uses is a wrapper for a javascript library installed through npm and packaged to integrate into vuejs. It does not quite fit our needs, we need to add some functionality to it, so I want to fork it and edit it.
The repo has two folders: src and dist.
As far as I understand, src is the actual src code while dist is a minified version for distribution. Questions:
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
Do components installed through npm use the /src/ version or the /dist/ one?
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
Thank you.
Based on your questions, I would suggest you get a bit more familiar into your stack and how to actually build your appication.
Generally speaking the /dist folder contains automatically generated files, which may be uploaded to a webserver of your choice. Since you are using VueJS, you should be able to generate these files by running npm run build.
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
As I already mentioned, these files are automatically generated by running npm run build. Therefore everytime you run this command, everything in /dist, will be automatically updated.
Do components installed through npm use the /src/ version or the /dist/ one?
Your working directory is always /src. Dependencies can be used like in any other application (this example uses Axios, which is a http client):
import axios from 'axios';
const httpClient = axios.create({ baseURL: 'https://api.something.com' });
httpClient.get(/* ... */);
If you are a beginner and are not 100% sure about how to use depencencies, I highly encourage you to read this article: An Absolute Beginner's Guide to Using npm
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
You do not have to delete anything in /dist. Simply running npm run build automatically will add the latest changes.
Please keep in mind that running npm run build is only relevant for your production environment. For your development environment you always want to use a dev server, which can be started with npm run serve.
What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve
How do I make javascript project depended of local javascript project using package.json? The project I must depend on doesn't have any npm configuration files in directory.
The dependency you wish to specify in the dependent's package.json must itself have a properly constructed package.json. Otherwise, it does not function as an npm package and you cannot specify it in another package's package.json in a meaningful way.
If you are able to add a package.json to the dependency, then you can include it as a local package by specifying its local path. Otherwise, if the dependency cannot contain a package.json, I recommend creating a symlink to it in the dependent's directory.
How can I register a local git package in bower?
My current component.json is as follows
{
"name": "myproject",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.0",
"twitter/bootstrap": "2.1.1"
}
}
However I also would like to add a package I have created at C:/mypackage which is a git repository with versions tagged.
When I do bower install --save C:/mypackage it properly adds it to project but it doesn't add it to my component.json.
I am trying bower register mypackage C:/mypackage but it keeps giving me
bower error Incorrect format
What am I doing wrong?
Option 1: Public Bower registration
Bower is built mostly to share public (client-side) code in a "non-opinionated" manner. The primary use case, then, is to have a publicly accessible repository (on GitHub) that is registerd with a name and git repository url. I just did this myself:
bower register linksoup git://github.com/automatonic/linksoup
This is just telling the bower server that when you install linksoup to go and grab the code at the git://github.com/automatonic/linksoup repository, and put it in the local project's component directory.
If this is what you want to do, then just set up a repository on github/etc., push your code there, and then register with the resulting repository info.
Option 2: Private dependency
There are many reasons not to post your code at a publicly accessible repository. It may not be open source, etc. if your mypackage code is not meant to be public, then you should probably not be registering it on the public bower server... Further, even if you could register a local directory, it would only work on your machine...which defeats the purpose of sharing the code via bower.
If you just want to have bower manage a local, private dependency, then I am going to riff off of blockhead's solution:
{
"name": "myproject",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.0",
"twitter/bootstrap": "2.1.1",
"mypackage": "file:///path/to/mypackage/.git"
}
}
This is just saying that myproject needs mypackage, and to use git clone to retrieve it. My guess is that this can use anything git can understand (including local repositories). But you should note that this may run into problems for anyone else working on this code that cannot access your local path.
Best Guess
It looks to me as if you may have assumed that bower register was a local operation (telling bower how to find a dependency via some sort of local registry). As far as I can tell, this is only a remote and public registration, which is why this is unsupported.
You may also be looking for a way to do something like a link operation with npm. That is, work on a dependency module without always having your dev cycle include a publish.
A little detail about how many people are involved and what you were trying to accomplish would facilitate a more targeted answer.
You can add any git repository as follows:
{
"name": "myproject",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.0",
"twitter/bootstrap": "2.1.1",
"myrepo":"git://myrepo.com/myrepo"
}
}
You can use bower link:
The link functionality allows developers to easily test their packages.
Linking is a two-step process.
Using bower link in a project folder will create a global link.
Then, in some other package, bower link <pkg> will create a link in the components folder
pointing to the previously created link.
This allows to easily test a package because changes will be reflected immediately.
Please note that bower will not fetch the linked package dependencies.
Bower will overwrite the link when installing/updating.
The big idea with bower is to easily share your projects' dependencies. So using local repo should be limited to testing.
Once you understand that, you should know that it is not –strictly– necessary to register your package in order to use it as a dependency.
This is due to the fact that bower depencency can specify either a version, a folder or a package. So you can use local repository.
Define as bower package
First you will need to define your dependency as a bower package:
# create the bower package
cd /path/to/you-need-me
bower init
# answer questions…
Add as project dependency
Then in your main project, the one that need the you-need-me dependency, edit bower.json file to add (or expand):
"dependencies": {
…
"you-need-me": "file:///path/to/you-need-me/.git/"
"you-need-me-windows": "C:/path/to/you-need-me-windows/.git/"
}
So you don't give a version, but an local git endpoint, i.e. the subdirectory .git/.
Install dependency
In the man project install bower dependencies with:
cd /path/to/main-project/
bower install
Failure
bower you-need-me#* ENOTFOUND Package /path/to/you-need-me/ not found
Check again your path and that you point to the .git/ directory of your dependency.
Success
You should get something like:
bower you-need-me#* not-cached file:///path/to/you-need-me/.git/#*
bower you-need-me#* resolve file:///path/to/you-need-me/.git/#*
bower you-need-me#* checkout master
bower you-need-me#* resolved file:///path/to/you-need-me/.git/#b18c753c6f
bower you-need-me#* install you-need-me#b18c753c6f
Write a blog entry about that: Testing bower.json locally before registering package.
I'm digging into a node package that uses a CLI, and am trying to extend it by adding some functionality. I've cloned the repo from github, but I've also installed it via npm.
How can I use my local version, instead of the one that's been installed via npm?
Thanks!
When you install a package using npm, it just puts it into the node_modules folder in the folder where you ran it (or if you pass -g, into a global node_modules folder).
require() uses a particular search order to find modules. To get a specific version of a module to load you can take two paths:
Specify a relative path to the module: require("./path/to/myfork/of/module")
Delete the version of the module installed by npm into mode_modules and put your fork of it in there
Make sure that your fork of that module is in a "closer" node_modules folder. Node searches the node_modules in same folder as the file calling require() and then works its way up the folder hierarchy to find a module.
For more information, take a look at http://nodejs.org/docs/v0.4.11/api/modules.html