13个npm快速开发技能(推荐)

为了保证可读性，本文采用意译代替直译。

每天，数百万开发人员使用npm或纱线来构建项目。运行npm init或npx create- response -app等命令几乎是构建JS项目的首选方式，无论是对于客户端还是服务器端还是桌面应用。

但是npm不仅仅是一个初始化项目或安装包。在本文中，我们将介绍npm的13种技术，从简单的快捷方式到自定义脚本，最大限度地利用npm:

由于我们许多人每天都在使用npm，所以从长远来看，即使节省少量时间也会产生重大影响。这些技巧是针对初学者和中级开发人员的，但即使你是一个有经验的开发人员，我希望你仍然可以找到一两个你以前从未遇到过的功能。

如果你想看更多高质量的文章，请戳GitHub博客，每年都有上百篇高质量的文章等着你！

主要内容

学习基本快捷键设置默认npm init属性，使脚本跨平台兼容并并行运行脚本。在不同的目录中运行脚本，并延迟运行脚本，直到端口准备就绪。列出并选择可用的脚本来控制运行前后的应用程序版本。从命令行编辑package.json，自动设置并打开github库。定制npm初始化脚本，使用定制的npm初始化脚本向GitHub提交您的第一个Commit。1.学习基本的捷径。

从长远来看，通过从基础知识学习最常见的npm快捷方式，我们将节省大量时间。

安装-概述：npm安装，npm的简称。测试-概述：NPM测试，缩写为npm t.帮助-一般：npm - help，npm的缩写-h . Global flag-一般：- global，g的缩写：-g.另存为开发依赖项-常规：-save-dev，简称：-d. Npm init默认值-常规：npm init -yes或npm init -force，缩写为NPMINIT-Y或NPMINIT-F我们知道-save或-S用于保存包，但现在它已经是默认值了。要安装软件包而不保存它，您可以使用——no-save标志。

不太常见的快捷键

还有一些不寻常的捷径，如下所示：

包信息将被添加到optionalddependencies-general: - save-optional，缩写为：-o .准确安装指定的模块版本-general:-save-optional，缩写为：-o .如果需要在本地保存npm包，或者通过下载单个文件选择一组可用的包，可以使用- save-bundle或-B将它们捆绑在一起，并使用npm pack获取捆绑包。

根的快捷方式

那个。符号通常用于表示应用程序的根目录，npm术语中的应用程序入口点，即package.json中指定为“main”的值

{'main': 'index.js'}这个快捷方式也可以用于像npx create-react-app这样的命令。因此，您可以运行npx create-react-app。而不是使用npxcreate-react-app来创建一个新的my-app目录。

2.设置默认npm初始化属性

当运行npm init来启动一个新项目时，您可能会发现自己一次又一次地输入配置详细信息。假设，你可能是这个项目的主要负责人。有时为了节省时间，您可以按如下方式设置这些字段的默认值：

npm配置集init.author.name 'Joe Bloggs'npm配置集init . author . email '[email protected]Npmconfig set init . author . URL ' joeblogs.com ' Npmconfig set init . license ' MIT '要检查这些属性是否添加正确，请在终端输入npm配置edit查看配置文件信息。当然，J可以直接在打开的配置文件中编辑信息。如果要编辑全局npm设置，请使用NPM配置编辑-g。

要重新初始化默认设置，可以使用以下脚本。第一行用空字符串替换配置文件，第二行用默认设置重新填充配置文件。

Echo'' $ (NPM配置获取用户配置)NPM配置编辑上面的脚本将重置用户默认值，下面的脚本将重置全局默认值

echo ' ' $(npmconfig get global config)npmconfig-global edit 3。使脚本跨平台兼容

任何在命令行上运行的代码都有兼容性问题的风险，尤其是在基于Windows和unix的系统(包括Mac和Linux)之间。如果你只处理特定的项目，那么这不是问题，但在很多情况下，任何开源或协作项目，以及示例和教程项目，都应该能够工作，而不管操作系统如何。

谢天谢地，解决办法很简单。有几个选项可供选择，但最好的是交叉环境。使用npm i -D跨环境将其安装为开发依赖项。然后在任何环境变量之前包含关键字cross-env，如下所示：

{ ' scripts ' : { ' build ' : ' Cross-env node _ env=production web pack-config build/we pack . config . js ' } } Cross-env是实现跨平台兼容性最无缝的方式，但还有另外两种流行的工具可以帮助实现跨平台兼容性：

Rimraf可以安装在世界各地运行跨平台脚本。ShellJS是在Node.js API上的Unix shell命令的可移植实现。

4.并行运行脚本

您可以使用依次运行两个或多个进程。但是并行运行脚本呢？因此，我们可以从各种npm包中进行选择。并发和npm-run-all是最流行的解决方案。

首先，通过NPM I-d并发安装开发依赖。然后以以下格式将其添加到脚本中：

{ ' start ' : ' concurrent ' command 1 arg \ ' \ ' command 2 arg \ ' } 5。在不同的目录中运行脚本

有时，您的应用程序在不同的文件夹中有多个package.json文件。从根目录访问这些脚本很方便，而不是每次运行脚本时都导航到不同的文件夹。有两种方法可以做到这一点。

首先是手动cd并运行相应的命令：

Cd文件夹npm开始cd.但是还有一个更好的解决方案，那就是使用- prefix标志来指定路径：

Npm起始前缀路径/到/您的/文件夹以下是一个工作应用程序中此解决方案的示例。我们希望在前端(在客户端目录中)和后端(在服务器目录中)运行NPM start。

启动“:”并发\' (NPM起始前缀客户端)\' \' (NPM起始前缀服务器)\ '，6。延迟运行脚本，直到端口准备好

通常，在开发全栈应用程序的过程中，我们可能希望同时启动服务器和客户端。等待节点模块提供了一种方便的方法来确保进程仅在某些进程准备就绪时发生。在我们的例子中，我们有一个特定的端口。

例如，这是我在使用React前端的电子项目中使用的开发脚本。同时，脚本并行加载表示层和电子窗口。但是，在等待状态下，电子窗口只有在http://localhost:3000启动时才会打开。

Dev' : '并发'跨环境浏览器=无NPM运行开始\' \ '等待http://本地主机：3000电子。\ ' '，另外，React默认打开一个浏览器窗口，但对于电子开发来说是不必要的。我们可以通过传递环境变量BROWSER=none来禁用这种行为。

7.列出并选择可用的脚本

列出package.json文件中可用的脚本很简单：只需转到项目的根目录，并在终端中输入npm run。

但是，有一种更方便的方法来获取脚本列表，它可以立即运行。因此，全球安装了NTL(国家预防机制任务清单)模块：

Npm i -g ntl然后在项目文件夹中运行ntl命令，并且可以获得可用脚本的列表，并且可以选择一个来运行。

8.运行前脚本和后脚本

您可能熟悉预构建和后构建这样的脚本，它们允许您定义要在构建脚本之前或之后运行的代码。但事实上，pre和post可以在任何脚本之前添加，包括自定义脚本。

这不仅使您的代码更加清晰，还允许您独立运行预脚本和后脚本。

9.控制应用程序版本

与手动更改应用程序版本相比，npm提供了一些有用的快捷方式来实现这一点。要添加版本，请在运行npm版本之前添加主要、次要或修补程序：

//1.0.0 NPM版补丁//1.0.1 NPM版小//1.1.0 NPM版大//2.0.0根据更新应用的频率，每次部署都可以通过增加版本号来节省时间。使用以下脚本3360

{“预部署”:“NPM版本补丁”} 10。从命令行编辑package.json

Package.json是一个常规的json文件，因此可以使用工具库json从命令行进行编辑。这提供了另一种修改package.json的新方法，允许您创建超过默认值的快捷方式。全局安装：

Npm install -g json然后可以使用-i进行就地编辑。例如，要添加一个值为“bar”的新脚本“foo”，请编写：

JSON-I-FP package . JSON-e ' this . scripts . foo=' bar ' 11。自动设置并打开github库

如果package.json文件中有“repository”，您可以通过输入npm repo在默认浏览器中打开它。

如果您的项目连接到远程存储库，并且git已经安装在命令行上，您可以使用此命令来查找您的连接存储库

更好的是，如果您按照上面的提示安装json模块，您可以使用下面的脚本自动将正确的存储库添加到package.json

JSON-I-FP package . JSON-e ' this . repository=\ ' $(git config-get remote . origin . URL)\ ' 12。自定义npm初始化脚本

让我们更进一步，使用我们自己的npm init脚本，它接受GitHub存储库URL并自动推送我们的第一个提交。在本技巧中，我们将讨论如何创建自定义npm init脚本。在下一个(也是最后一个)技巧中，我们将合并git。

您可以通过重定向到。主目录中的npm-init.js文件。(在Windows上通常是c/Users/用户名，在Mac上是/Users/用户名)。

让我们首先在主目录中创建一个nmm-init.js文件。为了确保npm init指向正确的文件，您可以运行：

NPM配置集初始化模块~ \。在集成git之前，有一个简单的。NPM-init.js文件，它模拟默认的NPM初始化问题。

module . exports={ name : prompt(' package name '、basename || package.name ')、version: prompt('version '、' 0.0.0 ')、decript : prompt(' description '、')、main: prompt('entry point '、' index.js ')、reportor : prompt(' git repository '、')、keywords: prompt(函数){ return s.split(/\s /) })、author: prompt(要设置默认值而没有问题，只需删除提示方法。

要恢复默认设置，只需删除即可。npm-init.js

13.使用自定义npm初始化脚本向GitHub提交您的第一个提交

将git命令合并到。npm-init.js文件，需要一个方法来控制命令行。为此，我们可以使用child_process模块。在文件的顶部介绍它，因为我们只需要execSync函数，所以我们可以通过使用析构函数赋值语法自己获得它：

const { Execsync }=require(' child _ process ')；我还创建了一个助手函数，将函数的结果打印到控制台：

函数run(func){ console . log(exec sync(func))。tostring ())}最后，我们将提示输入GitHub存储库URL。如果提供，我们将生成README.md文件，并开始我们的第一次提交。

repository:提示符(' github repository url '，' ')，函数(URL){ if(URL){ run(' touch readme . MD ')；运行(' git init ')；run(' git add README . MD ')；run(' git commit-m ' first commit ' ')；运行(` git远程添加源$ { URL } `)；run(' git push-u origin master ')；}返回url})一般来说。npm-init.js文件大致如下：

const { Execsync }=require(' child _ process ')；函数运行(func){控制台。日志(Execsync(func)).toString())}模块。exports={ name : prompt(' package name '，basename || package.name)，version: prompt('version '，' 0.0.0 ')，decript : prompt(' description '，')，main: prompt('entry point '，' index.js ')，keywords: prompt(函数){ return s.split(/\s /) })，作者3:提示('作者'，' Joe Bloggs [emailprotected]运行(“git init”)；运行(' git add README。MD’)；run(' git commit-m ' first commit ' ')；运行(` git远程添加源$ { URL } `)；run(' git push-u origin master ')；}返回url})，}package.json文件：

{ 'name': 'Custom npm init '，' version': '0.0.0 '，' decription ' : '一个测试项目，演示一个自定义npm初始化脚本、“main”:“index . js”、“keywords”:[]、“author”:“Joe Bloggs[email protected](JoeBloggs)。com)'，' license': 'ISC '，' repository ' : { ' type ' : ' git '，' URL ' : ' git https://github.com/JoeBloggs/custom.git' '，' bugs ' 3: { ' URL ' 3https://github。com/joebloghub你也可以通过合并开源代码库应用编程接口进一步实现这一点，这样就不需要创建一个新的存储库，这部分留给你们自己完成。

总的来说，希望这篇文章能够让你了解新公共管理可以实现的目标，并展示了一些提高工作效率的方法-无论是你知道常见的快捷方式，还是通过充分利用脚本package.json，或编写自定义版本的新公共管理初始化。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。