I run a project and have decided to switch from using bower to using yarnpkg. However, I would like to install the modules at a custom location rather than at the default node_modules/. In bower, currently I am achieving this functionality in bower by putting the following in the .bowerrc:
{
"directory": "./public/lib"
}
Is this kind of installation of packages at custom locations possible in yarnpkg? If yes, how can I do it? I have looked for such configuration options in the official documentation but have had no luck.
I don't think it's possible to specify a different directory for local installs. I think it's related to an underlying node/npm issue, specifically this github issue.
Related
Hey I want to install vuex in my Vue3 project. Because of several reasons I have no possibility to install it with npm or yarn. I already googled for solutions but it seems like there aren't any. Had someone of you maybe the same problem or an idea how to fix this?
You should be able to use with by loading it from a "CDN" as below
https://unpkg.com/vuex#4
Unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vuex#4.0.0/dist/vuex.global.js
For more info refer to installation section of Vuex docs
I am using several open source js libraries in my project. I recently moved to use bower for all the front-end dependencies. I liked how I can just provide a github url instead of a proper package name.
I have customized few libraries. So to manage them using bower, I created a single private repository called myLibs in an organization account on Github.
I am creating branches for each customized library. For example, customized angular-bootstrap library will be in angular-bootstrap branch and customized angular-material library will be in angular-material branch.
Now I am creating tags for each release in each library. The naming convention that I am using is branch-name/x.y.z For example, I have angular-bootstrap/1.0.0 and angular-material/1.1.1 tags.
This was good till I had to install these libraries using bower. To install the custom libraries I called the following command (It's a dummy url, don't try it)
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name/1.0.0
The library gets installed and I can see it in bower_components too, but in my bower.json the dependency entry turns up like this -
"library-patch":"https://github.com/test_org/myLibs.git#undefined"
This is not what I wanted. I wanted to have the proper tag name to be saved. I don't want to manually make changes in the bower.json file every time I want to add a custom library.
My first thought was that the naming convention of the tags will be a problem. So I changed it to branch-name-x.y.z from branch-name/x.y.z which allowed me to have the exact version in the bower.json to install it properly, but when trying to install the libraries using the terminal, instead of using bower.json, I am getting the#undefined` tag in the end of the dependencies.
Here's the log I am getting while installing the library from terminal.
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower not-cached https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower resolve https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower download https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz
bower retry Download of https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz failed with EHTTP, trying with git..
bower checkout library-patch#branch-name-1.0.0
bower resolved https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower install library-patch#branch-name-1.0.0
library-patch#branch-name-1.0.0 bower_components/library-patch
└── angular#1.4.8
Why am I getting undefined in the release/tag name? Am I making any mistake while naming the tags? Is there any way I can install those custom libs from terminal and save the exact tag in bower.json?
The solution for the problem was to use --save instead of --save-exact. I have no explanation for the same right now, but I'll update the answer as soon as I can.
As far as I can tell, it's because the package was getting installed from github directly, instead of from bower registry.
Is it possible to define different locations in your NPM package for browser and for server (NodeJS)?
My code is largely isomorphic, but it is uglified and concatenated for browsers.
Short answer, is that you can't do such thing. Mostly your dependencies are stored under /node_modules folder.
You may override this option by running some patches or an installer script.
Here is a bug raised on Github about this issue.It's is also described in an official NPM blogpost
But don't feel disappointed, you may use Bower as a dependency injector for your client side code. I prefer it as it feels more semantically and separated:
Bower for the front end, NPM for the back end.
Moreover, NPM packages are built for CommonJs only, Bower packages instead are more plug and play solutions
I'm completely new to frontend web dev with a very basic question. Once I npm install something, how do I actually use it? For example, I just did npm install bootstrap, and I would now like to be able to use the CSS and Javascript that it downloaded. I'm sure I shouldn't have to dig through the directories to find some entry point... so how do I now use bootstrap in my webpage?
Most modules on NPM are used in Node.js, for the server (backend). Node.js has a built-in function require('your-module') to make use of the module. This function is not present on the frontend in the browser. However, there are tools like browserify or webpack and probably others to make the NPM modules and the require function work in the frontend.
If you're just starting out I suggest you take a look at Bower first. With Bower (installed with NPM though) you can pull in all your frontend libraries like jQuery, Bootstrap, etc. to your project folder and you can point your script tags in your HTML to the bower_components/ directory, e.g. <script src="/bower_components/jquery/jquery.min.js"></script>. You can save a list of all libraries used with a version number in a json file called bower.json in the root of your project folder.
Based on this file you can pull in or update all the libraries listed with the use of the command line.
As a really general rule, npm is used for assets your node app will use on the server, while bower (and others) are the equivalent for dependencies that you want to use on the client.
That said, the use is basically the same.
npm (and bower) install the files into your project directory in a standard location. All you really have to do is make sure that location is accessible via a web request (typically, node_modules is not; which is why bower came about), and then embed link and script tags as appropriate in your html:
<script src='/node_modules/bootstrap/js/bootstrap.min.js'></script>
How do I install a dependency into a specific subdirectory using Bower? I'm working on an application built on AngularJS that requires localization. One of the libraries I'm using is looking for localization files in angular/angular_i18n. However, I'm developing with Angular 1.2 rc3 and the localization files are not part of the package so I have to install them separately.
How can I bower install angular-i18n into components/angular/angular-i18n/?
Help would be totally appreciated.
You can't. Bower uses a single location to store packages. However you can use tools like one of these grunt tasks to copy it over in the build-step.
you can also try to use this fork: https://github.com/hyperweb2/upt
that also implements subdirectory installation feature