FEEL FREE TO SHARE TUTORIALS, YOUR SKILS & KNOWLEDGE ON CODING, SCRIPTS, THEMES, PLUGINS OR ANY RESOURCES YOU HAVE WITH THE COMMUNITY- Click Here To Post Your Request,
JOIN COMPUTER REPAIR FORUM

Reply to thread

Message: <blockquote data-quote="codeguru" data-source="post: 65" data-attributes="member: 2">These days, most front-end projects are going to involve NPM packages of some kind. Occasionally, when browsing documentation for these packages, I’ll see a recommendation to install a package like this.yarn global add <package>Or like this.npm install --global <package>In both of these examples, the package is installed globally. This means you can run the [ICODE]<package>[/ICODE] command from any directory on your system.This works, but installing packages globally has a couple downsides.<ul> <li data-xf-list-type="ul">If you’re working with a team of developers, it’s hard to guarantee everyone is running the same package.</li> <li data-xf-list-type="ul">You can only have one version installed globally. This causes problems if you have different projects that rely on different versions of a package.</li> </ul>In this article, I’m going to show you three different approaches you can use to run packages without having to install them globally.<h2>Quick Setup</h2>For this article, we’re going to install a small CLI tool called <a href="https://github.com/patorjk/figlet.js" target="_blank">Figlet</a>, which prints ASCII art text. Create an empty directory and navigate into it. Then add a [ICODE]package.json[/ICODE] file with the following:{  "name": "example",  "license": "UNLICENSED",  "dependencies": {    "figlet-cli": "^0.1.0"  }}Run [ICODE]yarn install[/ICODE] or [ICODE]npm install[/ICODE] (depending on your preference) to install the package.Note: The [ICODE]yarn[/ICODE] and [ICODE]npm[/ICODE] commands are identical from here on out, so I’m only going to list the [ICODE]yarn[/ICODE] versions.<h2>Editing Your $PATH</h2>The first way to run locally install packages as if they’re globally installed is by editing your [ICODE]$PATH[/ICODE] environment variable. The [ICODE]$PATH[/ICODE] variable tells your system which directories to look for executables in.One of the handy features of Yarn and NPM is that they both include a [ICODE].bin[/ICODE] directory inside of [ICODE]node_modules[/ICODE] that contains symbolic links to all of the installed executables. You can easily add this folder to your path. The trick here is to modify your [ICODE]$PATH[/ICODE] to include a local [ICODE]node_modules/.bin[/ICODE] directory. This will allow you to run any local NPM CLI tool as if it were installed globally.First, you need to determine which shell you’re running. To do that, you can type the following into your CLI.echo $SHELLIf you haven’t configured a custom shell, this will likely be [ICODE]zsh[/ICODE] or [ICODE]bash[/ICODE]. If it’s [ICODE]bash[/ICODE], open up the [ICODE]~/.bash_profile[/ICODE] file. If it’s [ICODE]zsh[/ICODE], open [ICODE]~/.zshenv[/ICODE]. If the file you need doesn’t exist, then create it.Next, add the following to the bottom. Notice that [ICODE]./node_modules/.bin[/ICODE] is a relative path. This means it’s appended to whatever directory you’re currently in.export PATH="./node_modules/.bin:$PATH"That’s it! Restart your shell, navigate into the directory you created, and try running [ICODE]figlet[/ICODE].figlet Aww yeahYou should see something like this. Pretty neat, right?     _                      __   __         _    / \__      ____      __ \ \ / /__  __ _| |__   / _ \ \ /\ / /\ \ /\ / /  \ V / _ \/ _` | '_ \  / ___ \ V  V /  \ V  V /    | |  __/ (_| | | | | /_/   \_\_/\_/    \_/\_/     |_|\___|\__,_|_| |_|<h2>Running tools with Yarn</h2>Next up is defining commands in your [ICODE]package.json[/ICODE]. To add a command, all you have to do is add a [ICODE]scripts[/ICODE] section with your command name and what you’d like to run. In this example, I’ve added an [ICODE]aww-yeah[/ICODE] command.{  "name": "example",  "license": "UNLICENSED",  "dependencies": {    "figlet-cli": "^0.1.0"  },  "scripts": {    "aww-yeah": "figlet Aww Yeah"  }}You can run your custom command with [ICODE]yarn run <command>[/ICODE]. Most commands can also be shortened to [ICODE]yarn <command>[/ICODE]. Try it with [ICODE]yarn aww-yeah[/ICODE]!You can even pass arguments to your custom commands. Try adding the [ICODE]ascii[/ICODE] command listed below to your [ICODE]scripts[/ICODE] and running [ICODE]yarn ascii Aww Yeah[/ICODE]."scripts": {  "aww-yeah": "figlet Aww Yeah",  "ascii": "figlet"}Here’s a real-world example. I’m a big fan of both <a href="https://eslint.org/" target="_blank">ESLint</a> and <a href="https://jestjs.io/" target="_blank">Jest</a>. Almost all of my projects have these commands defined in them."scripts": {  "lint": "eslint --max-warnings=0 .",  "test": "jest"}This is great because my team and I can all share these commands. They’re also self-documenting, so if someone is new to a package they can glance at the [ICODE]package.json[/ICODE] to see which commands are available.<h2>NPX</h2>Finally, we have <a href="https://www.npmjs.com/package/npx" target="_blank">NPX</a>, a package runner by the folks from NPM. This handy tool allows you to run CLI commands without installing a package locally. This is great for tools that you only need to run once, such as generators.NPX is likely already installed on your machine if you’ve installed Node.js. If not you can install this one globally with [ICODE]yarn global add npx[/ICODE].Let’s give it a shot with [ICODE]figlet[/ICODE].npx figlet Aww YeahWasn’t that easy?Occasionally, you’ll run into a command that NPX doesn’t know how to find. An example is my <a href="https://github.com/landonschropp/yeoman-generators" target="_blank">Yeoman Generators</a> repository. In those cases, you’ll need to tell NPX which package to run explicitly with a [ICODE]-p[/ICODE] flag.npx -p yo -p @landonschropp/generator-eslint yo @landonschropp/eslint<h2>All Done!</h2>And there you have it. Now, you can install any NPM module locally and run the command as if it were global. I personally use all three of these methods on a regular basis. I hope you find them as useful as I have!The post <a href="https://davidwalsh.name/stop-installing-packages-globally" target="_blank">Stop Installing Packages Globally</a> appeared first on <a href="https://davidwalsh.name" target="_blank">David Walsh Blog</a>.<a href="https://tkjs.us/dwb" target="_blank"><img src="https://davidwalsh.name/demo/tjs_block-1.svg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a><a href="https://davidwalsh.name/stop-installing-packages-globally" target="_blank">Continue reading...</a></blockquote>

Verification

Richest Freecoded User

Most Freecoin

freecoded

4,838 Freecoin

Davy200

590 Freecoin

Johnhendrick

575 Freecoin

Smith16

527 Freecoin

nathan69

426 Freecoin

Laureine

415 Freecoin

anajeen

370 Freecoin

codeguru

287 Freecoin

Tekera

267 Freecoin

Akubay

170 Freecoin