Geekly articles weekly

节省时间的13个npm技巧

每天，数百万开发人员在创建其JavaScript应用程序时都会转向npm（或Yarn）。 运行诸如npm init或npx create-react-app已成为开始在几乎所有JavaScript项目上工作的一种熟悉的方式。 它可以是服务器，客户端，甚至是桌面应用程序。

但是npm实用程序不仅能够初始化项目或安装软件包。 该材料的作者（我们今天将其翻译发表）希望谈论13个npm技巧，这些技巧将使您从该系统中挤出所有可能的东西。 在这里，我们将考虑各种大小的技术-从使用快捷方式到自定义npm init的行为。



许多程序员每天都使用npm。 这意味着从长远来看，即使节省一点时间也可以使事情变得更好。 该材料主要供初学者和中级开发人员使用。 但是，即使您是专业人士，该材料的作者也希望您可以在这里找到一些以前从未遇到过的有趣的事情。

如果您完全不熟悉npm，请注意，我们感兴趣的程序与Node.js一起安装。 如果您使用的是Windows，建议您安装Git Bash，以便重现此处讨论的内容。

1.记录基本命令的简要选项


让我们从基础开始。 通过花一些时间探索最常见的npm命令的精简版本，您将在将来节省大量时间。

  • 安装软件包。 正常选项： npm install 。 快捷方式： npm i 。
  • 运行测试。 正常选项： npm test 。 快捷方式： npm t 。
  • 求助电话。 常用选项： npm --help 。 快捷方式： npm -h 。
  • 全局设置标志。 常用选项：-- --global 。 快捷方式： -g 。
  • 软件包安装标志为开发依赖项。 通常的选项是--save-dev 。 快捷键-D 。
  • npm init默认的npm init设置。 通常的选项是npm init --yes或npm init --force 。 快捷方式： npm init -y或npm init -f 。

现在，您无需使用--save或-S标志来保存软件包。 软件包默认情况下被保存。 为了不保存而安装软件包，可以使用--no-save标志。

recording较少的常用命令的简短记录选项


这里有一些更有用的缩写，但是，它们的使用范围不如我们刚才回顾的那么广泛。

  • 将程序包另存为可选依赖项。 通常的选项：-- --save-optional 。 快捷方式： -O 。
  • 保存有关软件包确切版本的信息。 通常的选项是--save-exact 。 快捷方式： -E 。

将npm install命令与--save-bundle或-B bundledDependencies会导致已安装捆绑软件中的条目显示在bundledDependencies中的bundledDependencies部分中。 这些软件包将在发布时与项目一起打包。 要创建包含项目文件和bundledDependencies列出的软件包的tarball文件，可以使用npm pack命令。

the根目录的缩写


通常，点（ . ）符号用于表示应用程序的根目录，或（取决于上下文）用于表示应用程序的入口点。 在npm中，这是在package.json文件中设置为main属性的值：

 {  "main": "index.js" }

该速记可用于例如npx create-react-app类的命令。 因此，您可以像这样运行此命令： npx create-react-app . ，而不是以npx create-react-app my-app的形式运行此命令（这将导致创建新的my-app文件夹） npx create-react-app . （注意命令后的要点）。 这将允许您在运行命令的当前文件夹中创建一个React应用程序模板项目。

2.设置npm init的默认值


通过不断运行npm init命令来创建新项目，您很可能会发现您在响应系统问题时一次又一次输入相同的数据。 例如-您可能是所创建的大多数项目的作者。 为了节省输入相同数据的时间，您可以为相应的字段设置自己的默认值：

 npm config set init.author.name "Joe Bloggs" npm config set init.author.email "joebloggs@gmail.com" npm config set init.author.url  "joebloggs.com" npm config set init.license   "MIT"

为了验证将此类信息添加到系统的正确性，请输入npm config edit命令。 这将在系统编辑器中打开配置文件。 如果要编辑全局npm参数，请使用npm config edit -g命令。

为了返回默认设置，您可以使用以下脚本。 它的第一行从文件中删除配置数据，第二行用默认值填充它。

 echo "" > $(npm config get userconfig) npm config edit

上面的脚本为用户重置了默认值。 以下脚本重置全局默认值：

 echo "" > $(npm config get globalconfig) npm config --global edit

3.跨平台脚本


在命令行上执行的任何代码都可能遇到兼容性问题。 对于基于Windows的系统和基于Unix的系统（包括Mac和Linux）之间的不兼容性，尤其如此。 如果您和您仅在某个项目上工作，这不是问题。 但是在许多情况下，跨平台脚本兼容性很重要。 例如，对于任何开源，培训或演示项目而言，独立于操作系统工作都是巨大的好处。

幸运的是，解决脚本兼容性问题并不是特别困难。 我们有几种选择。 但是，在这里我想谈谈其中之一，关于使用它我能获得最佳效果。 这是一个跨环境的程序包。 必须使用npm i -D cross-env命令将其安装为开发依赖项。 然后，您需要将cross-env放在每个环境变量的前面。 例如，它可能看起来像这样：

 {  "scripts": {    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" }

我发现cross-env包是实现跨平台脚本兼容性的最方便的工具。 但是，看看以下两个有助于解决此问题的流行工具将对您很有用：

  • Rimraf包装。 它可以运行全局脚本来运行跨平台脚本。
  • ShellJS包。 这是Unix命令外壳程序的可移植Node.js实现。

4.并行脚本执行


为了组织Linux Shell中命令的顺序执行，使用&&构造。 那么运行并行脚本呢？ 为此，您可以选择适当的npm软件包。 此类最受欢迎的软件包是并发和npm-run-all 。 在这里，我们演示了并发包的用法。

首先，必须将所选软件包作为开发依赖项安装： npm i -D concurrently 。 然后在package.json您可以使用以下形式的构造：

 {  "start": "concurrently \"command1 arg\" \"command2 arg\"" }

5.运行位于各个目录中的脚本


有时，您会遇到在不同目录中有多个package.json文件的应用程序。 例如，在项目的根目录中运行其中声明的脚本会很方便。 这比每次需要运行脚本时都必须移动到其他文件夹要好得多。 为此，您可以使用以下两种方法。

首先，您可以使用cd自动导航到所需目录。 它可能看起来像这样：

 cd folder && npm start && cd ..

但是这个问题可以用更有趣的方式解决。 它包含使用--prefix标志，您可以使用它指定路径：

 npm start --prefix path/to/your/folder

以下是从实际应用程序中应用此解决方案的示例。 在这里，我们需要为项目的客户端和服务器部分运行npm start 。 它们的代码分别位于client和server文件夹中。

 "start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",

6.延迟启动脚本，直到有可用资源为止


开发全栈应用程序时，经常需要同时运行应用程序的客户端和服务器部分。 等待包允许同步某些过程的执行。 在我们的情况下，有必要在启动应用程序的客户端部分之前，一定端口是可用的。

例如，在一个电子应用程序中使用了一个dev脚本，其接口是使用React编写的。 concurrently使用的脚本可以concurrently运行应用程序的表示层和电子窗口。 但是，使用wait-on只有在React表示层准备就绪并可以在http://localhost:3000访问时，才可以打开Electron窗口。 这是使用wait-on样子：

 "dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",

另外，React项目的标准行为是自动打开浏览器窗口。 如果将React与Electron一起使用，则没有必要。 可以使用BROWSER=none环境变量来BROWSER=none它，在此之前，为了解决方案的cross-env平台兼容性，请找到cross-env命令。

7.列出并使用可用脚本


为了列出package.json可用的脚本，只需转到项目的根目录并在终端中执行npm run命令。

但是，还有一种更加方便的方法来列出脚本。 使用它时，可以立即从列表中选择所需的脚本并运行。 为了使用这种脚本处理方式，我们需要全局安装ntl （Npm任务列表）模块：

 npm i -g ntl

然后，在项目文件夹中，您需要运行ntl命令。 它将显示可用脚本的列表，并使您有机会选择要运行的脚本。 这是它的外观。


使用ntl命令

如果您不完全了解项目中的脚本，则此功能非常有用。 在程序员希望用短命令输入和快速按下键盘上的几个键来替换长命令输入来运行脚本的情况下，这也是很好的。

8.运行前脚本和后脚本


您可能熟悉prebuild和postbuild脚本， postbuild脚本使您可以在运行build脚本之前和之后运行一些代码。 可以为任何其他脚本定义此类前脚本和后脚本。 包括那些描述由程序员添加到p ackage.json的对象。

这不仅可以使代码更整洁，而且可以帮助独立运行前脚本和后脚本。

9.应用程序版本控制


程序员可以使用特殊的npm命令来代替手动更改应用程序的版本。 为了增加应用程序版本号的相应部分，可以使用npm version命令，后跟major ， minor或patch ：

 // 1.0.0 npm version patch // 1.0.1 npm version minor // 1.1.0 npm version major // 2.0.0

根据您更新应用程序的频率，可以在每次部署新版本的应用程序时自动增加版本号，从而节省时间。 例如，像这样：

 {  "predeploy": "npm version patch" }

10.从命令行编辑package.json


package.json文件是常规的json文件，因此可以使用json实用工具直接从命令行进行编辑。 这在需要修改package.json情况下开辟了新的可能性，允许您创建自己的缩短版本的命令。 全局安装json包：

 npm install -g json

然后，可以使用-I使用json实用程序快速编辑文件。 例如，要将带有值bar的新foo脚本添加到文件，可以使用以下命令：

 json -I -f package.json -e 'this.scripts.foo="bar"'

在下一节中，您将看到一个使用json实用工具的更实际的示例。

11.设置和存储库开放的自动化


如果package.json文件中有一个"repository"条目，则意味着您可以默认在系统使用的浏览器中打开存储库页面。 为此，请使用npm repo命令。

如果您的项目已经连接到远程存储库，并且安装了git命令行实用程序，则意味着您可以使用以下命令找到存储库的地址：

 git config --get remote.origin.url

但这还不是全部。 如果按照前面的技巧安装了json实用程序，那么可以使用以下脚本将正确的存储库信息自动添加到package.json ：

 json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""

12.创建自己的脚本来控制npm init命令


现在让我们谈谈解决更大的任务。 即，我们将开发自己的脚本来控制npm init命令的操作，该命令接受GitHub存储库的URL并自动向其发送第一次提交。 在这里，我们讨论如何创建此类脚本。 在下一部分（这是我们的最后一个技巧）中，我们将讨论使用git 。

您可以使用.npm-init.js定义npm init命令的行为。 让我们在当前用户的主目录中创建一个这样的文件（在Windows上通常为C:/Users/<username> ，在Mac上为/Users/<username> ）。 之后，执行以下命令，告诉npm该文件的确切位置：

 npm config set init-module ~\.npm-init.js

在与c git集成之前，让我们看一个.npm-init.js的简单示例，该示例重现了在使用npm init命令而没有其他设置的情况下系统询问用户的问题：

 module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),   main: prompt('entry point', 'index.js'),  repository: prompt('git repository', ''),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC') }

每个问题均基于以下模板：

 nameInPackage: prompt('nameInPrompt', 'defaultValue')

为了指示某个值并且不问用户问题，只需删除prompt方法。

如果要返回标准npm init设置，只需删除.npm-init.js 。

13.使用npm init将第一个提交发送到GitHub存储库


为了在.npm-init.js执行git命令.npm-init.js我们需要找到一种使用命令行的方法。 您可以child_process使用child_process模块。 我们将其连接到文件的顶部，并且由于只需要execSync函数，因此仅使用解构将其导入：

 const { execSync } = require('child_process');

此外，我们将创建一个帮助程序功能，该功能在控制台中显示该功能的结果：

 function run(func) {  console.log(execSync(func).toString()) }

最后，让我们创建适当的提示块来处理GitHub存储库的URL。 如果脚本具有URL，我们将创建README.md文件并将第一次提交发送到存储库。

因此， .npm-init.js的module.exports对象的元素之一应为以下代码：

 repository: prompt('github repository url', '', function (url) {  if (url) {    run('touch README.md');    run('git init');    run('git add README.md');    run('git commit -m "first commit"');    run(`git remote add origin ${url}`);    run('git push -u origin master');   return url; })

这是添加后的.npm-init.js文件的完整代码：

 const { execSync } = require('child_process'); function run(func) {  console.log(execSync(func).toString()) } module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),  main: prompt('entry point', 'index.js'),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC'),  repository: prompt('github repository url', '', function (url) {    if (url) {      run('touch README.md');      run('git init');      run('git add README.md');      run('git commit -m "first commit"');      run(`git remote add origin ${url}`);      run('git push -u origin master');       return url;  }), }

这是系统使用此.npm-init.js创建的package.json文件的.npm-init.js ：

 {  "name": "Custom npm init",  "version": "0.0.0",  "decription": "A test project, to demonstrate a custom npm init script.",  "main": "index.js",  "keywords": [],  "author": "Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)",  "license": "ISC",  "repository": {    "type": "git",    "url": "git+https://github.com/JoeBloggs/custom.git"  },  "bugs": {    "url": "https://github.com/JoeBloggs/custom/issues"  },  "homepage": "https://github.com/JoeBloggs/custom#readme" }

通过设置初始化新项目的过程，您可以走得更远。 例如，要确保在创建项目时会为其创建一个新的存储库。

总结


希望本文能帮助您了解使用npm可以实现的目标。 我想相信您在这里找到了可以使您更高效地工作的东西-无论我们是在讨论使用缩短版本的命令，在package.json编写脚本还是在设置npm init以适合您的需求。

亲爱的读者们！ 您是否使用npm自动化工作？

Source: https://habr.com/ru/post/zh-CN458504/

More articles:


All Articles