npm 更新 npm_这些NPM技巧将使您成为专业人士

npm 更新 npm

By Carl-Johan Kihl

卡尔·约翰·基尔(Carl-Johan Kihl)

After using NPM for almost 8 years, I’ve learned things along the way that I wish I knew when I started. Let’s call them tricks, things that drastically improved my way of working with NPM. Today I want to share my top 10 tricks with you.

在使用NPM近8年之后，我以自己希望开始时了解的方式学习了一些东西。 让我们称它们为把戏，它们极大地改善了我使用NPM的方式。 今天，我想与您分享我的十大绝招。

1.节省时间。 ⏲使用捷径 (1. Save time. ⏲ Use Shortcuts)

This is one of the most useful but not so well-documented features. A shortcut for a command might seem like a trivial thing, but the truth is that you will write 30–60% less code. You’ll save time you can spend on something meaningful, like drinking an extra cup of coffee ☕️ ?

这是最有用的工具，但没有那么详尽的文档。 命令的快捷方式看似微不足道，但事实是您将减少30–60％的代码。 您将节省时间，可以花在一些有意义的事情上，例如喝一杯咖啡☕️？

Instead of npm install <package>write npm i <package>.

代替npm install <package>编写npm i <package> 。

Instead of npm install --save <package> write npm i -S <package>.

代替npm install --save <package>编写npm i -S <package> 。

Instead of npm install --save-dev <package> write npm i -D <package>.

代替npm install --save-dev <package>编写npm i -D <package> 。

Instead of npm install --global <package> write npm i -G <package>.

代替npm install --global <package>编写npm i -G <package> 。

? Bonus shortcut! Wanna impress your colleagues? ? Here it comes…

？ 奖金捷径！ 想打动您的同事吗？ ？ 它来了…

Instead of npm testwrite npm t.

代替npm test编写npm t 。

2.在一个命令中安装多个软件包 (2. Install multiple packages in one command)

Why write multiple lines when you can write one? ? If you know your packages by heart, the fastest option is to install them all in a one-liner, but be careful! One misspelled package and the whole command will fail. If you’re unsure about the names just install them one by one.

为什么可以写多行呢？ ？ 如果您内心都知道您的软件包，最快的选择是将它们全部安装在一口，但是要小心！ 一个拼写错误的程序包和整个命令将失败。 如果不确定这些名称，则只需一个接一个地安装它们。

npm i -S react redux react-redux

3.安装来自不同来源的软件包 (3. Install packages from different sources)

By default, when running npm-install, NPM will install the latest version from the npm-registry (https://registry.npmjs.org)

默认情况下，运行npm-install ，NPM将从npm-registry ( https://registry.npmjs.org )安装最新版本。

But there’s more! NPM can install packages from other sources as well, like an URL or a tarball file.

但是还有更多！ NPM也可以从其他来源安装软件包，例如URL或tarball文件。

When making your own packages or pull-requests for existing packages, this feature is powerful. For example, if you have your own fork of Redux, you can install your package directly from your fork. (Change username to your username on GitHub.)

在制作自己的程序包或对现有程序包进行拉取请求时，此功能非常强大。 例如，如果您有自己的Redux分支，则可以直接从分支中安装软件包。 (更改 username 到GitHub上的用户名。)

npm i

Even better, if you’re using a GitHub repository, you can use this shortcut:

更好的是，如果您使用的是GitHub存储库，则可以使用以下快捷方式：

npm i username/redux

npm i username/redux

There’s more! You can also install a package from a specific branch. Useful while testing a future release. Just add # together with the branch name at the end.

还有更多！ 您也可以从特定分支安装软件包。 在测试将来的版本时很有用。 只需在末尾添加#和分支名称。

npm i username/redux#

? Bonus shortcut! Are you not using GitHub? No worries, there are shortcuts for BitBucket and GitLab as well:

？ 奖金捷径！ 您不使用GitHub吗？ 不用担心， BitBucket和GitLab也有快捷方式：

npm i bitbucket:username/myrepositorynpm i gitlab:username/myrepository

4.链接包 (4. Linking Packages)

Sometimes you want to work on a project and develop its packages at the same time. Committing and pushing your package to a remote repository for every change you want to try out is tiresome! ? Instead, you can use a feature called package linking.

有时您想同时处理一个项目并开发其程序包。 对于您要尝试的每个更改，将包提交并推送到远程存储库很烦人！ ？ 相反，您可以使用称为包链接的功能。

Package linking works by creating a symlink in your node_modules folder that points to the local repository of your package. In this way, you can edit packages locally and the changes will be instantly available in the project using it.

软件包链接通过在node_modules文件夹中创建一个指向软件包本地存储库的符号链接来工作。 这样，您可以在本地编辑包，并且使用它可以立即在项目中使用更改。

The easiest way to understand package linking is to try it out!Let’s say we have a project called myproject and a package called mypackage. We want mypackage to be a dependency of myproject.

理解包链接的最简单方法就是尝试一下！假设我们有一个名为myproject的项目和一个名为mypackage的包。 我们希望mypackage是myproject的依赖项。

Go to the folder mypackage and write

转到文件夹mypackage并写

npm link

Nice! Now, go to the folder myproject and write

真好！ 现在，转到文件夹myproject并编写

npm link mypackage

npm link mypackage

Done! Take a closer look at the folder structure

做完了！ 仔细看看文件夹结构

As you can see, myproject/node_modules/mypackage is now a symlink to the folder mypackage! Now you can continue to develop mypackage and all changes you make will be instantly available in myproject.

如您所见， myproject/node_modules/mypackage现在是文件夹mypackage的符号链接！ 现在，您可以继续开发mypackage并且所做的所有更改都将立即在myproject可用。

5. npx命令 (5. The npx command)

There are many scripting tools on NPM out there that you probably will use but will not be a part of your runtime bundle. Grunt, gulp, react-create-app, react-native-cli and mocha are just a few.

NPM上有很多脚本工具，您可能会使用它们，但它们不会成为运行时捆绑软件的一部分。 Grunt，gulp，react-create-app，react-native-cli和mocha等等。

Before NPM 5.x you had to install these tools either as global packages or as devDependencies. This was time-consuming, not only to install but to maintain all your tools for multiple projects. Also, most of the tools you will only use once or twice.

在NPM 5.x之前，您必须以全局软件包或devDependencies的形式安装这些工具。 这非常耗时，不仅要安装而且还要维护用于多个项目的所有工具。 同样，大多数工具将只使用一次或两次。

Here, the binary NPX comes to the rescue and saves a lot of work for us! For example, to start a new react-project you can simply write:

在这里，二进制NPX可以解决，并为我们节省了很多工作！ 例如，要启动一个新的react-project，您可以简单地编写：

npx create-react-app my-new-project

npx create-react-app my-new-project

The latest version of create-react-app will be downloaded and executed immediately. No more installing and maintaining tools as global packages.

最新版本的create-react-app将被下载并立即执行。 不再需要将安装和维护工具作为全局软件包安装。

6.监视和清理您的项目 (6. Monitor and clean your project)

It’s important to understand what’s happening under the hood when installing packages in order to solve issues and to make the dependency tree and the final bundle size as small as possible.

重要的是要了解安装软件包时的幕后情况，以解决问题并使相关树和最终捆绑包的尺寸尽可能小。

First of all, we need a good overview of the dependency tree and which package versions have actually been installed. Use the command npm list. Add the flag --depth=0 to list only top-level packages and add -g to list your global packages.

首先，我们需要对依赖关系树以及实际安装了哪些软件包版本有一个很好的了解。 使用命令npm list 。 添加标志--depth=0仅列出顶级软件包，并添加-g列出全局软件包。

npm listnpm list --depth=0 -g

npm listnpm list --depth=0 -g

NPM is good at maintaining itself and flattening the dependency tree on the fly, but it’s always a good habit to dedupe your project before publishing. It might remove a few packages for you.

NPM擅长于自我维护和快速平化依赖树，但是在发布之前对项目进行重复数据删除一直是一个好习惯。 它可能会为您删除一些软件包。

npm dedupe

npm dedupe

It’s also a great idea to get a good overview of your outdated and missing packages. It’s hard not to love this view for its well-organized columns and the Christmas-vibe color scheme ??

很好地了解过时和丢失的软件包也是一个好主意。 很难不喜欢这种观点，因为其井井有条的专栏和圣诞节氛围的配色方案？

npm outdated

npm outdated

If you get a lot of red rows, you need to run npm update to update your packages to the latest possible version according to your package.json, which is as well stated in the wanted column

如果出现很多红色行，则需要运行npm update以根据package.json将软件包npm update为最新的可能版本，这在通缉栏中也有说明

npm update

npm update

Great! Now, if you run npm oudated again, all the red rows should be gone.

大！ 现在，如果再次运行npm oudated ，所有红色行都将消失。

If you are using the caret ^ in front of your versions in package.json, the major versions will not be updated (hence the yellow rows). This is good, cause there might be breaking changes updating to a new major version.

如果您在package.json中的版本前面使用插入号^ ，则主要版本将不会更新(因此黄色行)。 这很好，因为可能会有重大更改更新到新的主要版本。

If you still want to update everything to the latest version, you can use the tool npm-update-all. It’s as easy as running this command in your project folder.

如果您仍想将所有内容更新到最新版本，则可以使用工具npm-update-all 。 就像在您的项目文件夹中运行此命令一样简单。

npx npm-update-all

npx npm-update-all

Cool! Now you got the latest version of all your dependencies. Your package.json is updated as well. ⚠️ Be aware of breaking changes ⚠️

凉！ 现在，您获得了所有依赖项的最新版本。 您的package.json也将更新。 ⚠️注意重大变化⚠️

7.转到主页以获取软件包 (7. Go to the home page for a package)

Need to check the documentation for a package? Why bother switching over to the browser and start googling when everything you need is the terminal? ?

需要检查包装文件吗？ 当您需要的一切都是终端时，为什么还要切换到浏览器并开始谷歌搜索呢？ ？

Open the repository for a package in the browser

在浏览器中打开软件包的存储库

npm repo <package>

npm repo <package>

Open the home page

打开主页

npm home <package>

npm home <package>

Open the documentation

打开文档

npm docs <package>

npm docs <package>

8.使用NPM脚本 (8. Use NPM scripts)

I love npm-scripts! Instead of using task-runners like Gulp and Grunt for automating repetitive tasks you can, in most cases use npm-scripts instead for several reasons:

我喜欢npm脚本！ 大多数情况下，可以使用npm-scripts代替使用Gulp和Grunt这样的任务运行器来自动执行重复性任务，而是：

➕ Fewer dev-dependencies or global dependencies to maintain.➕ No new tools for contributors and team members to learn➕ Less code and configuration.

to维护的开发依赖性或全局依赖性较少。➕没有供贡献者和团队成员学习的新工具➕较少的代码和配置。

First of all, you have predefined scripts like start, install, test, prepublishthat have special meanings in NPM. You can read about how they can be used in my previous tutorial where we build an npm-package from scratch.

首先，您具有预定义的脚本(如start, install, test, prepublish ，这些脚本在NPM中具有特殊含义。 您可以在我之前的教程中了解如何使用它们，在此我们从头开始构建npm-package。

You can also create your own custom scripts. Here is an example of a script that will format your code in the src folder with ESLint:

您也可以创建自己的自定义脚本。 这是一个脚本示例，它将使用ESLint格式化src文件夹中的代码 ：

package.json:

package.json：

"scripts":{"test": "jest","format": "eslint src --fix"}

Now you can run npm run format and ESLint will do its job.

现在，您可以运行npm run format ， ESLint将完成其工作。

You can do a lot of things with npm-scripts like running shell-commands and chaining scripts after each other. Check out npm-scripts for a deeper understanding of this powerful feature.

您可以使用npm脚本做很多事情，例如运行shell命令和相互链接脚本。 查看npm-scripts ，以更深入地了解此强大功能。

9.在vsCode中运行NPM脚本 (9. Running NPM Scripts in vsCode)

Sometimes I have 30 npm-scripts in my package.json (No kidding). ? Luckily, if you are using Visual Studio Code, you can list all your npm-scripts in the explorer and run your scripts with a click of a button! Be sure this setting is enabled:

有时我的package.json中有30个 npm脚本(不开玩笑)。 ？ 幸运的是，如果您使用的是Visual Studio Code ，则可以在资源管理器中列出所有npm-scripts并单击一下按钮即可运行脚本！ 确保启用此设置：

npm.enableScriptExplorer: true

npm.enableScriptExplorer: true

10.设置默认值 (10. Set your default values)

When creating a new project, you will run npm init and you will be asked questions about your project. To save time you’ll probably write run npm init -y to fill in the package.json with default values.

创建新项目时，您将运行npm init并且将询问有关项目的问题。 为了节省时间，您可能需要编写运行npm init -y来将package.json填充为默认值。

But what exactly are your default values? ? I like to set some of these myself to save time further on! ?

但是，您的默认值到底是什么？ ？ 我喜欢自己设置一些以节省时间！ ？

npm config set init.author.name "Carl-Johan (C-J) Kihl"npm config set init.author.email "carljohan.kihl@mail.com"

npm config设置init.author.name“ Carl-Johan(CJ)Kihl”“ npm config设置init.author.email” carljohan.kihl@mail.com“

摘要 (Summary)

Those was my tips for NPM for now! If you have more tips and tricks that you want to share please add a comment below! ?

这些是我现在的NPM提示！ 如果您想分享更多提示和技巧，请在下面添加评论！ ？

? Bonus shortcut!Imagine it’s Friday night and you’re about to finalize a new project, but you’re way too tired to write npm dedupe . ?

？ 奖金捷径！想象一下，在星期五晚上，您即将完成一个新项目，但是您太累了，无法编写npm dedupe 。 ？

No worries! Save three letters by writing:

别担心！ 通过写保存三个字母：

npm ddp

npm ddp

Thank you for reading.

感谢您的阅读。

翻译自: https://www.freecodecamp.org/news/10-npm-tricks-that-will-make-you-a-pro-a945982afb25/

npm 更新 npm