I am trying to add packages via yarn inside of intellij. I can get it to install the package fine, and I can even get it to move the packages to my own custom folder via --modules-folder "ExternalLibs".
The issue I am having is, unless I allow yarn to install on the root and under the node_modules folder, it won't recognize that there is a package.
Is there a way to point the package.json to look in the custom path?
You can try setting NODE_PATH environment variable pointing to your folder location in Node.js run configuration template: Run | Edit Configurations..., expand Templates node, select Node.js configuration, specify NODE_PATH in Environment variables field
Please see https://youtrack.jetbrains.com/issue/WEB-19476#focus=streamItem-27-2819977.0-0
Note that, though the modules in require() calls will actually be resolved, you will still see warnings about non-installed packages due to WEB-25792; you have to disable JavaScript | General | Missing module dependency inspection to get rid of the warnings
Related
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
I am using VS 2019 for Core 3.1 development and I installed Font Awesome whith Yarn:
yarn add #fortawesome/fontawesome-free
However, whenI try to reference it in my HEAD section like this:
<script defer src="~/lib/#fortawesome/fontawesome-free/js/all.js"></script>
I get the following error:
the 'fortawesome' doesnt exist in actual context
Package managers like yarn, npm, etc. just add the packages to your project. They generally aren't ready to deploy directly at that point, but rather require a build pipeline to create the actual JS/CSS resources. The #fortawesome/fontawesome repo is an exception in that 1) it's not actually a package and 2) the files are already "built". Even then, though, they still won't be in the right location.
I'm not overly familiar with yarn, but npm, for example, puts everything in a node_modules directory. That directory is not served by default, and should not be served, because it contains "raw" stuff. You'd need a separate build pipeline (using npm scripts, webpack, gulp, etc.) to build/copy assets into a directory that is served (i.e. wwwroot). That is likely the piece you are missing.
For this, since there's no build actually required, you just need to have the assets copied to something like wwwroot/lib and then you'll be able to reference it via the script tag on the page. That can be done with any tool like npm, webpack, gulp, grunt, etc. so you'll just have to research and pick the one that fits your needs best.
I am working in a very restricted environment, which means I do not have any access to internet. I setup everything in order to import an Angular Template Project and install all the packages from an offline cache. I followed these steps:
On the online machine
configure yarn-offline-mirror with pruning to false (directory X)
create a new angular app with ng new foo --skipInstall=true
install the packages with yarn (install) in order to generate a yarn.lock and to store all the tgz-packages in directory X
delete node_modules
Whenever I need more packages, I use npm-package-downloader with the argument -d to download all the dependencies as tgz-files too and copy them to directory X
On my offline machine
I import the tgz-files from directory X and put them in the same location
I configure yarn-offline-mirror like on my online machine
I Import the angular template and install the needed packages with yarn clean cache followed by yarn --offline
As long all the tgz-packages are on my offline machine, this works like a charm (because of yarn.lock).
My Problem
I want to add further packages on my offline machine. The packages are present in the offline mirror, because I copied them onto the machine. When I run
yarn clean cache
yarn add <absolute-path-to-tgz-package> --offline
two possible scenarios arise:
The package has no dependencies, in which case it works as intended
The package has dependencies: in this case, follwing error gets thrown for each "missing" dependency (package-name and package-version are placeholders):
Couldn't find any versions for "package-name" that matches
"package-version" in our cache. This is usually caused by a missing
entry in the lockfile, running Yarn without the --offline flag may
help fix the issue.
As far as I understand, yarn needs somehow to know, which dependencies a package requires. But it has to know, otherwise it couldn't throw this specific error. So my question is, how can I force yarn to look for dependencies in directory X too? The packages are there, since I download them with the respective dependencies. And obviously I am not supposed to manually edit yarn.lock. The docs for yarn add do not list such an option (as a matter of fact, it does not even list the --offline flag)
I am working on a vue project that needs to use another private vue project as a dependency. This other private project is a vue plugin.
I have found how to tell yarn to fetch a package on a private gitlab repository by adding the following line in package.json:
"dependencies": {
"myPackage": "git+https://{token-name}:{token}#gitlab.com/path/to/repo.git#someTag"
}
This works well, and the content of my repo is downloaded in my node_modules. However, here comes my problem :
In this repo, the actual vue plugin is not at the root, it's under a subfolder of the repo, meaning the index.js at the root of the repo is not the one from my plugin (and I guess it is the one yarn will be using).
I have a custom yarn deploy script that compiles my plugin into one JS file and put it in a dist folder, however the dist folder is not versioned. I can use the gitlab CI to generate it, but still i'm pretty sure yarn won't use what is inside the dist folder.
My (broad) question is : how can I use the tools at my disposition (yarn, gitlab-ci) to be able to use my private gitlab repository as a vue-plugin for one of my other project ?
You would tell other packages how to use your packages by using the properties of your package.json. For instance, the main declaration
{
main: 'dist/index.js'
}
This tells node how to resolve your module from your package.
so require('my-vue-plugin') or import MyVuePlugin from 'my-vue-plugin' would resolve to node_modules/my-vue-plugin/dist/index.js, for example.
As far as versioning is concerned -- you don't version the file, or the folder. You version through the version property of your package.json and, in your case, through GIT by using git tag -a v(major).(minor).(patch).
The version that you tag should match the version that you specify in package.json.
I would recommend reading more about semantic versioning and creating a script (like VueJS) to auto-increment your package, version and publish.
In my app, I have these dependencies:
TypeORM
typeorm-linq-repository AS A LOCAL INSTALL ("typeorm-linq-repository": "file:../../../IRCraziestTaxi/typeorm-linq-repository"), who has a dev dependency AND a peer dependency of TypeORM
The reason I use a "file:" installation of typeorm-linq-repository is that I am the developer and test changes in this app prior to pushing releases to npm.
I was previously using node ~6.10 (npm ~4), so when I used the "file:" installation, it just copied the published files over, which is what I want.
However, after upgrading to node 8.11.3 (npm 5.6.0), it now links the folder rather than copying the published files.
Note, if it matters, that my environment is Windows.
The problem is this: since both my app and the linked typeorm-linq-repository have TypeORM in their own node_modules folders, TypeORM is being treated as a separate "instance" of the module in each app.
Therefore, after creating a connection in the main app, when the code that accesses the connection in typeorm-linq-repository is reached, it throws an error of Connection "default" was not found..
I have searched tirelessly for a solution to this. I have tried --preserve-symlinks, but that does not work.
The only way for me to make this work right now is to manually create the folder in my app's node_modules and copy applicable files over, which is a huge pain.
How can I either tell npm to NOT symlink the "file:" installation or get it to use the same instance of the TypeORM module?
I made it work pretty easily, although I feel like it's kind of a band-aid. I will post the answer here to help anybody else who may be having this issue, but if anybody has a more proper solution, feel free to answer and I will accept.
The trick was to link my app's installation of TypeORM to the TypeORM folder in my other linked dependency's node_modules folder.
...,
"typeorm": "file:../../../IRCraziestTaxi/typeorm-linq-repository/node_modules/typeorm",
"typeorm-linq-repository": "file:../../../IRCraziestTaxi/typeorm-linq-repository",
...