+$21 ways to improve productivity with npm

21 ways to improve productivity with npm

+$Node Package Manager, or npm for short, sees use all over the modern JavaScript world. As it usually does its job with minimal issues, developers tend to forget the time spent using it. While this is not a big problem, npm does contain a set of extremely nifty features that are intended to save you a lot of valuable time.

+$As with most other optimisations, not every measure is universally applicable. The following steps show a few 'should-knows' that have the potential to improve productivity, make you type less or reduce waiting time.

+$Studying the art of 'faster npm' is not an end in itself. In addition to letting you get more done, showing off advanced console skills is a surefire way to impress colleagues and possible recruiters – in today's hyper-competitive workspace, every little helps, and impressing onlookers with a few nifty shortcuts is a great way to raise a ruckus.

+$Finally, some people simply gain joy from optimising their workflows. So in short, taking a look at ways to tune npm always makes sense. Here are a few of the best npm-whacks.

+$01. Kill the progress bar

+$As npm operations can be quite time-intensive, a progress bar shows up. Sadly, displaying it takes time – in some cases, up to 50 per cent of the time is spent updating the user interface. Fortunately, you can eliminate the progress bar by setting the progress environment variable to false.

+$tamhan@tamhan-thinkpad:~/nodespace/futurenpm$ npm set progress=false tamhan@tamhan-thinkpad:~/nodespace/futurenpm$ npm get progress false

+$02. Spawn packages without typing

21 ways to improve productivity with npm: Spawn packages without typing

+$Node.js generates a default package.json

+$Repeated, ritual hammering of the Return key accompanies the creation of new npm projects far and wide. This is utterly unnecessary – simply pass the parameter-y+$to confirm all of the defaults offered by the deployment assistant. Node.js generates a default package.json with the contents that are shown in the image above.

+$tamhan@tamhan-thinkpad:~/nodespace/ fastnodetest$ npm init -y

+$03. Don't Type Commands

+$Node commands consist of a verb and one or more parameters. Commonly used ones – 'install' comes to mind straight away – can be replaced with short single-letter abbreviations. From a technical point of view,+$npm INpm安装+$are the same: the only difference is the amount of typing that's needed to enter them.

+$npm install gulp-debug npm i gulp-debug

+$04. Kill other verbs too

21 ways to improve productivity with npm: Kill other verbs too

+$Using short forms is a good way to demonstrate npm skills

+$Incidentally,安装+$is not the only command that is due for a speed-up. A careful look at the output of the command list in the figure reveals that config, test, search and several other verbs also get the abbreviation treatment. Making use of these short forms is a nice way to demonstrate npm proficiency – especially if you explain them before using them for the first time.

+$05. List All Dependencies

+$Finding out whether package A depends on package B tends to be rather tedious. However, npm knows this by default and gladly shares its knowledge with you. Simply enter+$npm Ls+$to flood your terminal with a tree-like representation of all dependencies and their sub-dependencies, or you can limit the depth of the tree by passing in+$--depth=0

+$tamhan@tamhan-thinkpad:~/nodespace/ fastifytest$ npm ls --depth=0 nodespace@1.0.0 /home/tamhan/nodespace └── fastify@1.11.2

+$06. Detect Outdated Packages

+$Today's web applications stand in a never-ending hailstorm of attacks from miscreants. Finding outdated dependencies in your Node-based project is now as easy as entering+$npm Outdated+$– the program checks its cache and provides a list of+$overaged+$packages.

+$tamhan@tamhan-thinkpad:~/nodespace/ fastifytest$ npm outdated Package Current Wanted Latest Location fastify 1.11.2 1.13.3 1.13.3 nodespace

+$07. Find The Source

21 ways to improve productivity with npm: Find the source

+$Find useful samples and documentation for packages in their GitHub repositories

+$Most npm packages live inside a GitHub repository. These websites usually aren't limited to providing the package source code – in most cases, you can also find useful samples and documentation. Open the URL associated with your package by entering repo – in most cases, the repository website will pop up in your workstation's browser.

+$tamhan@tamhan-thinkpad:~/nodespace$ npm repo fastify

+$08. Inspect A Package

21 ways to improve productivity with npm: Inspect a package

+$Entering npm view can yield valuable information

+$Package manifest files contain valuable information. Entering npm view, or its shorthand+$v+$, shows the overview pictured in the screenshot accompanying this step. Among other things, you will usually find out about the latest beta and stable version, along with information about distribution format and maintainers.

+$tamhan@tamhan-thinkpad:~/nodespace$ npm view jquery

+$09. Find Exact Names

+$The figure accompanying step 08 shows a statement informing us that 48 versions of the library are available. Finding out their exact names is best accomplished via a specialised version of+$npm V+$– it dumps a list of all known strings. Keep in mind that the listing accompanying this step had to be abbreviated for printability reasons.

+$tamhan@tamhan-thinkpad:~/nodespace$ npm v jquery versions [ '1.5.1', '1.6.2', . . . '3.0.0-alpha1', '3.0.0-beta1', '3.0.0-rc1', '3.0.0', '3.1.0', '3.1.1', '3.2.0', '3.2.1', '3.3.0', '3.3.1' ] tamhan@tamhan-thinkpad:~/nodespace$

+$10. Find unknown package names

21 ways to improve productivity with npm: Find unknown package names

+$The search command can help you out when you don't know a package name

+$To use many of the above-mentioned commands requires the exact package name. If you do not know it for some reason, the search command is ready to help. It takes one or more strings and outputs all package names somewhat associated with them in a tabular form.

+$tamhan@tamhan-thinkpad:~/nodespace$ npm search vue

+$11. Search Even More

21 ways to improve productivity with npm: Search even more

+$Yarn can find the packages that elude npm's best efforts

+$Should npm search return no useful leads, the+$Yarn Search Engine+$makes for a logical next stop. It is a preview for a more powerful local search engine, but nevertheless the text box at the top of the page has a knack of finding packages other engines tend to overlook.

+$12. Add Auto-completion

+$Microsoft's IntelliSense was the seminal product to familiarise generations of programmers with the benefits of one-click autocomplete. Npm supports a similar feature, whose activation is accomplished via the command sequence shown. After that, press Tab to make Bash autocomplete your input.

+$tamhan@tamhan-thinkpad:~/nodespace$ npm completion >> ~/.bashrc tamhan@tamhan-thinkpad:~/nodespace$ source ~/.bashrc

+$13. Harness Configuration Settings

21 ways to improve productivity with npm: Harness configuration settings

+$Set defaults in order to move things along quicker

+$The above-mentioned npm init command makes for a great first step into the world of configuration settings. Try the two following commands to set defaults that will then be used on all newly created project files.

+$npm config set init.author.name  npm config set init.author.email 

+$Developers working on a package and one or more products based on it should use npm's link feature. It spawns a symlink connecting the local package folder to the projects. That way, changes cross-propagate automatically.

+$git clone  cd  npm link cd ../site npm link 

+$15. Get specific versions of packages

运用+$npm I+$usually deploys the latest version of any package it can find. Picking a specific or an older version is possible too. Simply use the@+$operator to specify your needs – the samples accompanying this step require a specific and a named version of vue.

+$tamhan@tamhan-thinkpad:~/nodespace$ npm i vue@2.5.15 tamhan@tamhan-thinkpad:~/nodespace$ npm i vue@beta

+$16. List all configuration settings

21 ways to improve productivity with npm: List all configuration settings

+$There are plenty of configuration settings to play with

+$The above-mentioned config system works with a set of environment variables. List their contents by entering+$npm Run Env+$and chasing the results through the+$grep+$utility. The image above shows just a few of the settings available.

+$tamhan@tamhan-thinkpad:~/nodespace/nodetest2$ npm run env | grep npm_ npm_config_cache_lock_stale=60000 npm_config_ham_it_up= npm_config_legacy_bundling= npm_config_sign_git_tag= . . .

+$17. Create a custom variable

+$npm does not limit you to variables created by the system. The snippet accompanying this step loads a file that can declare variables of its own.

+$"config": { "build_folder":"./dist" }

+$18. Use it in anger

+$When the above-mentioned file is in place, the newly generated variable will behave just like any of its colleagues. It can be used in various commands, permitting you to change their behaviour to taste on the fly.

+$"scripts": { "build": "gulp build --dist $npm_package_ config_build_folder" }

+$19. Manage Node.js and npm versions smartly

+$Some programs depend on specific versions of the Node.js environment or the Node.js package manager. Mitigate such problem sources with the Node Version Manager记录在这里+$– getting started is really easy thanks to an one-click install script.

+$curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket

+$generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket

+$20. Run Without Installation

21 ways to improve productivity with npm: Run without installation

+$Save time by running packages immediately with npx

+$Scaffolding generators and similar programs usually run just once in a project's lifetime. Manually downloading and executing them gets tedious quickly. Node package execute, or npx, can run packages immediately. If the files required are not at hand, the program simply downloads them before starting execution.

+$tamhan@tamhan-thinkpad:~/nodespace$ npx create-react-app my-app

+$21. Ditch That WiFi

+$Let's put the most controversial tune-up trick at the end. Ditching WiFi for a wired connection to your router cuts off a precious 10 to 20 milliseconds from each round trip. In the long run, these savings add up – especially when looking at operations that involve hundreds of package exchanges.

+$This article was originally published in issue 284 of creative web design magazine网页设计者+$Buy Issue 284 Here要么在这里订阅Web Designer