How to install globally installed npm packages - javascript

I wanted to try Vue js but it seems to be very hard for me to import it to my project. I there a way where you can install the dependencies without using internet (downloading again) which is already installed globally.
Vue 2 is installed globally and I will be using vue init, but it seems that vue init is installing the Vue again from the internet. I want it to take the dependencies from the already installed (globally) and put it in my folder so that I dont use internet.
Thanks in advance...

You can create a new project dir to store the globally installed package (copy from the installation folder) and after that copy process make a zip of it so that it can be used again, then you have to config some of the files for your project needs.

Try install localy and use command
npx vue <command>
Also check package.json in your project

Related

Running node app without node_modules folder

My professor wants us to submit our project for our node.js app but we are not allowed to include node_modules in the submission.
When I try to run the app without the folder in there, it crashes due to missing dependencies.
Am i missing a step?
Presumably either
you're not supposed to use third-party dependencies in your solution (just the core Node.js modules), or
you're not supposed to include node_modules in your submission (which is good practice anyway), but instead just have a package.json (and possibly a lockfile) so your instructor can npm i / yarn to install the packages.
When building an app that has node_modules you aren't supposed to include this anyway.
Install any node_modules that are required for your application to run and when sibmitting just leave out the node_modules folder.
Your package file will include everything that your instructor can check over or install on their end if necessary.
I found this random example on github: https://github.com/hayanisaid/nextjs-intro-example
As you can see by looking they have there package files but no node_modules, when you clone this repo you would run npm install which would create and install the packages
package.json contains information about node modeuless.
If u deleted node modules, you just have to run npm i --save.
All the dependency will be downloaded through this.
Just use npm/yarn install if you remove the folder.

how to test my tsdx ui library package locally on react.js project

i use tsdx to create a react ui library, and i want to test it on my next.js project before pushing it to the npm package.
i have try npm link , it works well in the beginning but when i change any thing in the package files it gave me an error, module not found, but it still in the node_modules folder.
i have try to run yarn install <tsdx-project-path > but it still gave me an error
so is there any way to include my tsdx ui library in my project locally.
let's think you have following folder structure.
|---/current-project
|---/tsdx-package
So you need to run npm install ../tsdx-package from inside current-project. I'm pretty sure you forgot to add ../ to your package path.

How do you build a local package before it is installed elsewhere?

I am building a local package in one directory (lib), and locally installing it from another directory (app). Both projects are typescript.
I've figured out how to do this, but since I am using typescript, it would be very convenient to compile the library when I run npm install -D ../lib from inside app. Is there a way of doing this? I defined a preinstall script in the library, but it doesn't run unless I run install in lib.
Using that knowledge, I could create a preinstall in app that would go into lib and build it, but that doesn't sit right with me. Is there an alternative? A part of the lifecycle that runs when somebody else is installing the current project?
As far as I know, you can use install script. It'll excecute when installing the package. This works fine for me.

Can I use specific version of VUEJS in Laravel project?

I am new to the VUEJS and learning it by torrent.
The author use docs from old version https://ru.vuejs.org/v2/guide/components-custom-events.html
for example .sync was added only in 2.3.0 version
<text-document v-bind:title.sync="doc.title"></text-document>
Can I use specific version(like 2.2) of VUEJS with laravel project?
Laravel uses NPM (node package manager), and any module gets into node_modules directory.
Install Node.js.
Open terminal and cd into your project root.
Then just run:
npm install --save vue v2.3
Note that above may fail if there is a dependency conflict (and fixing that is out of the OP's scope).
So, it doesn't matter that you are new to Vue as long as you know enough to prepare Laravel (and can ensure it's package.json does not conflict).

Linking local library into Angular 5 Project

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

Categories