Develop Reference

how to setup a project to develop on a npm package

I have a git root project where I am using inside my root project a git subproject.
So for example I have the project MyApp and a subproject UIComponents.
Currently I have cloned the UIComponents repo into my project folder and added UIComponents to .gitignore of the root project.
Now I want to build a npm package for UIComponents and I want to be able to switch between npm production build and development.
The problem is in development the import is this:
import Button from './UIComponents'
and with the npm package the import is this:
import Button from '#my_name/UIComponents'
I dont want to adjust the imports everytime.
The first thought that comes to mind is to develop the UIComponents inside node_modules folder but this seems not to be a nice solution.

For solving this, try to use npm link.
So instead of cloning it in a subdirectory that need to be added to gitignore, just check out the repository outside of you project and then link it.
Example:
cd ~/projects/UIComponents
npm link
cd ~/projects/MyApp
npm link #my_name/UIComponents
In this way you can use the same import syntax but you can develop locally in both projects at the same time without the need of publishing every change.

Making a local Javascript library - Do I have to publish an NPM package?

I have some javascript utility functions that I would like to be able put in a central folder and reference from different projects.
It seems I cant import functions from outside the src file in of my project.
Do I have to publish an NPM package?
Do I have to duplicate the code in each project?
Am using javascript/node + vscode.
thanks

To create a local (unpublished) library package
Create a 'my-library' folder. Include source code, exporting any desired functions. Folder must include the 'package.json' file generated by npm init
cd into the folder of the project that needs to use your library. Run npm install --save local/path/to/my-library.
The --save will add the package to your dependencies in the project's package.json file, as it does with 3rd party published packages. It will also add a copy of the source code to the node modules folder of the project, as always.
import/require the package as you would normally, from any project. For example
import { myFunction } from "my-library"

You can use Lerna for dividing projects into multiple packages locally. It uses the same node_modules and can be deployed to NPM anytime.

'vue' is not recognized as an internal or external command

everything was installed correctly. but whenever I try to create project, it says "'vue' is not recognized as an internal or external command". I installed and re-installed but didn't work. npm was also added to environmental variable path.
C:\Users\touha\Desktop>npm list -g --depth=0
C:\Users\touha\.npm-packages
`-- #vue/cli#3.8.2
C:\Users\touha\Desktop>vue ui
'vue' is not recognized as an internal or external command,
operable program or batch file.
C:\Users\touha\Desktop>

Locate vue.cmd and add its location to your PATH
It is added to package manager(npm or yarn) installation. So you may find it at following locations
YARN
C:\Users{YourAccount}\AppData\Local\Yarn\bin
NPM
C:\Users{YourAccount}\AppData\Roaming\npm

just open PowerShell and run: npm install -g #vue/cli

Addition: If setting the path variable and reinstalling #vue/cli does not work, using the node.js command prompt instead might solve the issue.

It seems vue isn't been installed globally for some reasons.
This is the step I followed to solve mine:
Firstly, create your desired project folder (say "Vue Project"). This is where you want to create a vue project.
Then create a "node_modules" folder in the Vue Project folder
Then go to your system npm folder C:\Users{YourAccount}\AppData\Roaming\npm
You will see three different "vue" files. Copy them and paste in the Vue Project Folder you created.
Go back to C:\Users{YourAccount}\AppData\Roaming\npm and enter the node_modules folder. You'll see a "#vue" folder. Copy this, and paste it in the node_modules folder you created in the Vue Project Folder.
You can now head back to the CLI and create your project using "vue create my-vue-project" where my-vue-project is your desired vue project name.

You can try this way it worked for me
go to the location of your yarn or npm mine is C:\Users\TED\AppData\Local\Yarn\bin for Yarn
C:\Users\TED\AppData\Local\Npm\bin for Npm users
TED will be replaced by your user name
then copy and add it to your system environment variable
Note in case you don't find AppData make sure you have view hidden file checked

I am using Yarn to install #vue/cli.
The way I solve it is via the following steps
Locate your global installed vue.cmd location
Add the vue.cmd directory into System variable Env. For myself, the path is C:\Users{MyAccount}\AppData\Local\Yarn\.bin

what worked for me:
In a powershell :
npm install vue
npm install -g #vue/cli
C:\Users\{USER}\AppData\Roaming\npm\vue.cmd create {NAME}

if you got this error most probably chance package not installed completely
check-in C:\Users\dev\AppData\Roaming\npm
if you had not found the package under this folder then re-run your command

Run command prompt as administrator
Run setx /M path "%path%;%appdata%\npm
Restart the command prompt
Now create the Vue project

How to verify an object instance? instanceof and ....prototype.isPrototypeOf(...) are not reliable [duplicate]

Whenever I make projects, I have to download all dependencies of node modules. Without copying the node_modules, Is there anyway to share the central node_modules in multiple projects?
like the followings, I have to run many commands every time..
npm install gulp-usemin
npm install gulp-wrap
npm install gulp-connect
npm install gulp-watch
npm install gulp-minify-css
npm install gulp-uglify
npm install gulp-concat
npm install gulp-less
npm install gulp-rename
npm install gulp-minify-html

You absolutely can share a node_modules directory amongst projects.
From node's documentation:
If the module identifier passed to require() is not a native module,
and does not begin with '/', '../', or './', then node starts at the
parent directory of the current module, and adds /node_modules, and
attempts to load the module from that location.
If it is not found there, then it moves to the parent directory, and
so on, until the root of the file system is reached.
For example, if the file at '/home/ry/projects/foo.js' called
require('bar.js'), then node would look in the following locations, in
this order:
/home/ry/projects/node_modules/bar.js /home/ry/node_modules/bar.js
/home/node_modules/bar.js /node_modules/bar.js
So just put a node_modules folder inside your projects directory and put in whatever modules you want. Just require them like normal. When node doesn't find a node_modules directory in your project folder, it will check the parent folder automatically. So make your directory structure like this:
-myProjects
--node_modules
--myproject1
---sub-project
--myproject2
So like this, even your sub-project's dependencies can draw on your main node_modules repository.
One drawback to doing it this way is you will have to build out your package.json file manually (unless someone knows a way to automate this with grunt or something). When you install your packages and add the --save arg to an npm install command it automatically appends it to the dependencies section or your package.json, which is convenient.

Try pnpm instead of npm.
pnpm uses hard links and symlinks to save one version of a module only ever once on a disk.
If you have npm installed, you can install in your terminal with:
npm install -g pnpm
To update your existing installations (and sub-directories) use:
pnpm recursive install
Or use the shorthand command (leave off -r if you need to target only one directory)
pnpm -r i
One helpful note: You may find some rare packages don't have all their dependencies defined. They might rely on the flat node_modules file directory structure of npm or yarn installs. If you run into issues of missing dependencies, use this command to hoist all the sub dependencies into a flat-file structure:
pnpm install --shamefully-hoist
It's best to avoid using the --shamefully-hoist flag as it defeats the purpose of using pnpm in the first place, so try using the command pnpm i your-missing-package first (See pnpm FAQ).

I found a trick, just take a look at the Symbolic Links (symlinks) on Windows or Linux, it is working just like shortcuts but more powerful.
Simply you need to make a Junction for your node_modules folder anywhere you want. The junction is nothing but a short cut to your original node_modules folder. Create it inside your project folder where the actual node_modules would have been created if used npm install.
To achieve this you need at least one node_modules real folder then make a Junction to it in the other projects.
On Windows, you can either use the Command Prompt, or use an application. Using the Command Prompt gives you a bit more control, using an application is easier I suggest Link Shell Extension.

Main directory should look like this
node_modules
Project 1
Project 2
Project 3
Project 4
just open the file Project 1/.angular-cli.json
change the schema
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
to
"$schema": "./../node_modules/#angular/cli/lib/config/schema.json"
and don't forget to create node_modules empty folder inside your project directory

See also npm v7.0.0's support for workspaces
RFC
https://github.com/npm/rfcs/blob/latest/implemented/0026-workspaces.md
Documentation
https://docs.npmjs.com/cli/v7/using-npm/workspaces

By looking at some articles it seems that Lerna
is a good tool for managing multiple projects inside a single directory (monorepo). It supports modules sharing without duplicating the entire packages in every folder and commands to install them in multiple projects.
Javascript monorepos
Monorepos by example
Building large scale apps in a monorepo
pnpm is also a simple and efficient tool, which doesn't duplicate those modules which are already installed for other projects.

Let's assume that having a single node_modules it should contain all the packages for all applications. thus your apps will also share most of the unique package.json entries (just the name should change)
my idea would be to have a single root and multiple src level as below
root\package.json
root\node_modules
root\\..
root\app1\src\\..
root\app2\src\\..
the only issue you might face would be having a backup of json (or tsconfig) for any app and restore them when you work on it or setup your startup scripts to serve any app

Using Node package in NativeScript app

I am learning NativeScript. For example, I would like to include this Guid generator package in my NativeScript app. My question is, how? I look at the directory structure generated by the command-line tool and I see the following relevant pieces:
node_modules
app
tns_modules
package.json
package.json
Do I add node-uuid to the ./package.json or the ./app/package.json? How do I reference it in my app then? For example, if I want to use uuid from the app.js file, what does that look like? I'm a little confused because of the package structure of NativeScript and how things actually get loaded at runtime.
Thanks

Run npm install from the root of your {N} app.
npm install --save node-uuid
The dependency will be added to the outer package.json.
And then in your app.js file, just use it like usual.
var uuid = require('node-uuid');
When you run tns run <platform> or tns build <platform>, the modules inside node_modules/ will be copied to folder under platforms/, take Android for example, it will be at platforms/android/assets/app/tns_modules/node-uuid. The building process is completed under platforms/ directory.