10分钟内讲解Npm脚本使用教程

目录
  • 引言
  • 1.什么是npm脚本?
  • 2.原则
  • 3.通配符
  • 4.传递参数
  • 5.执行顺序
  • 6.默认值
  • 7.钩子
  • 8.缩写形式
  • 9.变量
  • 10.常见脚本示例
  • 11.使用nrm管理npm镜像

引言

使用Node进行开发时,必须使用npm,脚本是npm的最强大和最常见的功能之一。

我将在本文中介绍如何使用npm脚本。

1.什么是npm脚本?

Npm允许您使用文件中的scripts字段定义脚本命令package.json

    {
        // ...
        "scripts": {
            "build": "node build.js"
        }
    }

上面的代码是package.json文件的一部分,scripts这里的字段是一个对象。它的每个属性都对应一个脚本。例如,与该build命令对应的脚本为node build.js

如果您npm run在命令行下使用该命令,脚本将被执行。

    $ npm run build
    # equivalent to execution
    $ node build.js

在中定义的这些脚本package.json称为npm脚本。有很多优点:

  • 与项目相关的脚本可以放在一个地方。
  • 用于不同项目的脚本命令可以使用相同的外部接口,只要它们具有相同的功能即可。用户不需要知道如何测试您的项目,只需运行npm run test即可。
  • 您可以利用npm提供的许多辅助功能。

您可以使用npm run不带任何参数的命令来查看当前项目的所有npm脚本命令。

    $ npm run

2.原则

npm脚本的原理非常简单。无论何时npm run执行,都会自动创建一个新的shell,并且将在该shell中执行指定的脚本命令。因此,只要该命令可以由外壳程序(通常是Bash)运行,它就可以用npm脚本编写。

特殊的是,由创建的shell npm runnode_modules/.bin当前目录的子目录添加到PATH变量中,并且该PATH变量将在执行后恢复。

这意味着可以直接通过脚本名称来调用当前目录的node_modules / .bin子目录中的所有脚本,而无需添加路径。例如,如果当前项目的依赖项中包含Mocha,则只需mocha test直接编写:

    "test": "mocha test"

而不是像这样写:

    "test": "./node_modules/.bin/mocha test"

由于对npm脚本的唯一要求是脚本可以在shell中执行,因此它们不一定是Node脚本,并且可以在其中编写任何可执行文件。

npm脚本的退出代码也遵循shell脚本的规则。如果退出代码不是0,则npm将假定脚本执行失败。

3.通配符

由于npm脚本是Shell脚本,因此可以使用Shell通配符。

    "lint": "jshint *.js"
    "lint": "jshint **/*.js"

在上面的代码中,*表示任何文件名,**表示任何子目录。

如果要将通配符传递给原始命令以防止被Shell逸出,则必须逸出星号。

    "test": "tap test/\*.js"

4.传递参数

使用--指示传递给npm脚本的参数。

    "lint": "jshint **.js"

如果将参数传递给上述npm run lint命令,则必须编写如下。

    $ npm run lint --  --reporter checkstyle > checkstyle.xml

您也可以在中再次封装命令package.json

    "lint": "jshint **.js",
    "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml"

5.执行顺序

如果要在npm脚本中执行多个任务,则需要弄清执行顺序。

如果是并行执行(并行并行执行),则可以使用&符号。

    $ npm run script1.js & npm run script2.js

如果是顺序执行(仅在成功执行前一个任务时才执行下一个任务),则可以使用该&&符号。

    $ npm run script1.js && npm run script2.js

这两个符号是Bash的功能。另外,您可以使用节点的任务管理模块:script-runnernpm-run-allredrun

6.默认值

通常,npm脚本由用户提供。但是,npm为两个脚本提供了默认值。换句话说,这两个脚本无需定义即可直接使用。

    "start": "node server.js",
    "install": "node-gyp rebuild"

在上述代码中,默认值npm run startnode server.js,提供有一个server.js在项目的根目录脚本; 默认值npm run install就是node-gyp rebuild,只要有一个binding.gyp项目的根目录下的文件。

7.钩子

npm脚本有两个钩子:prepost。例如,build脚本命令的挂钩是prebuildpostbuild

    "prebuild": "echo I run before the build script",
    "build": "cross-env NODE_ENV=production webpack",
    "postbuild": "echo I run after the build script

当用户执行时,它将按以下顺序自动执行npm run build

    npm run prebuild && npm run build && npm run postbuild

因此,可以在这两个挂钩中进行一些准备和清理。这是下面的例子。

    "clean": "rimraf ./dist && mkdir dist",
    "prebuild": "npm run clean",
    "build": "cross-env NODE_ENV=production webpack"

Npm默认提供以下钩子:

  • 预发布,后发布
  • 预安装,后安装
  • preuninstall,postuninstall
  • 前版本,后版本
  • 前测,后测
  • 穿越,后停
  • 启动前,记录开始
  • 重启前,重启后

自定义脚本命令也可以与prepost挂钩一起添加。例如,脚本命令myscript具有premyscriptpostmyscript钩子。但是,double pres和posts无效。例如,prepretestpostposttest是无效的。

npm_lifecycle_event由npm提供的变量返回当前运行的脚本的名称,如pretesttestposttest,等。因此,您可以使用该变量为npm scripts同一脚本文件中的不同命令编写代码。让我们看下面的例子。

    const TARGET = process.env.npm_lifecycle_event;
    if (TARGET === 'test') {
          console.log('Running the test task!');
    }
    if (TARGET === 'pretest') {
        console.log('Running the pretest task!');
    }
    if (TARGET === 'posttest') {
         console.log('Running the posttest task!');
    }

❝ 请注意,prepublish挂钩不仅将在npm publish命令之前运行,而且还将在npm install(不带任何参数)命令之前运行。但是,这种行为很容易使用户感到困惑,因此npm 4引入了一个prepare行为类似于的新钩子prepublish。从npm 5开始,该prepublish钩子只会在npm publish命令之前运行。 ❞

8.缩写形式

这是四个常用npm脚本的简短版本。

npm start 是短的 npm run start

npm stop 是短的 npm run stop

npm test 是短的 npm run test

npm restart 是短的 npm run stop && npm run restart && npm run start

npm startnpm stopnpm restart都是很好的理解,而npm restart是实际执行三个脚本命令的化合物命令:stoprestartstart。并且执行顺序如下。

  • 重新启动
  • 调动
  • 邮件停止
  • 重新开始
  • 预启动
  • 开始
  • 邮件开始
  • 重启后

9.变量

npm脚本具有非常强大的功能,可让您使用npm的内部变量。

首先,npm脚本可以获取package.json带有npm_package_前缀的字段。例如,package.json下面是一个。

    {
        "name": "foo",
        "version": "1.2.5",
        "scripts": {
            "view": "node view.js"
        }
    }

然后,该变量npm_package_name返回foo,并且该变量npm_package_version返回1.2.5

    // view.js
    console.log(process.env.npm_package_name); // foo
    console.log(process.env.npm_package_version); // 1.2.5

在上面的代码中,我们package.json通过环境变量process.env对象获取的字段值。如果是Bash脚本,则可以使用$npm_package_name和获得两个值$npm_package_version

npm_package_前缀也支持嵌套的package.json领域。

    "repository": {
        "type": "git",
        "url": "xxx"
    },
    scripts: {
        "view": "echo $npm_package_repository_type"
    }

在上面的代码中,您可以使用获取字段的type属性。repositorynpm_package_repository_type

这是另一个例子。

    "scripts": {
        "install": "foo.js"
    }

在上面的代码中,npm_package_scripts_install变量的值等于foo.js

npm config get xxx也可以通过npm_config_前缀获取npm的配置变量(命令返回的值)。例如,您可以使用获取当前模块的release标签npm_config_tag

    "view": "echo $npm_config_tag",

请注意,环境变量可以覆盖中的config对象package.json。

    {
    "name" : "foo",
    "config" : { "port" : "8080" },
    "scripts" : { "start" : "node server.js" }
    }

在上面的代码中,npm_package_config_port变量返回8080。并且可以通过以下方法覆盖此值。

    $ npm config set foo:port 80

env命令可以列出所有环境变量。

    "env": "env"

10.常见脚本示例

    // delete the directory
    "clean": "rimraf dist/*",
    // build an HTTP service locally
    "serve": "http-server -p 9090 dist/",
    // open the browser
    "open:dev": "opener http://localhost:9090",
    // real-time refresh
    "livereload": "live-reload --port 9091 dist/",
    // build an HTML file
    "build:html": "jade index.jade > dist/index.html",
    // Re-execute the build as long as the CSS file has changed.
    "watch:css": "watch 'npm run build:css' assets/styles/",
    // Re-execute the build as long as the HTML file has changed
    "watch:html": "watch 'npm run build:html' assets/html",
    // Deploy to Amazon S3.
    "deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",
    // build favicon
    "build:favicon": "node scripts/favicon.js",

11.使用nrm管理npm镜像

nrm(npm registry manager)是npm的镜像源管理工具,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换。

在命令行执行以下命令,全局安装nrm

    npm install -g nrm

执行命令nrm ls查看可选的源。

其中,带*的是当前使用的源,上面的输出表明当前源是taobao源。

如果要切换到cnpm源或者其他镜像,您可以使用nrm use 源名称进行切换:

    nrm use cnpm

你可以增加定制的源,特别适用于添加企业内部的私有源,执行命令nrm add <registry> <url>,其中reigstry为源名,url为源的路径。

    nrm add registry http://registry.npm.frp.trmap.cn/

删除,执行以下命令:

    nrm del <registry> url

你还可以通过 nrm test 测试相应源的响应时间,从而决定使用哪种镜像!

    nrm test taobao

以上就是10分钟内讲解Npm脚本使用教程的详细内容,更多关于Npm脚本教程的资料请关注我们其它相关文章!

(0)

相关推荐

  • npm发包实践使用gRPC教程

    目录 1.目的 2.步骤 3.结果 4.package.json 参考 1.目的 实现将自己的一些工具或者 demo 作品 放到 npm 帮助更多开发者理解和学习,构建强大的学习生态 可以直接 安装到你的项目中,入门级理解 gRPC 2.步骤 1.敲这个 命令  输入 npm 上注册的 username password 还有邮箱 npm adduser --registry https://registry.npmjs.org/ 2.敲这个 npm publish --registry htt

  • Node.js npm命令运行node.js脚本的方法

    //通过npm运行node脚本 (控制台应用程序) cmd---cd package.json所在的目录---npm start (package.json中的scripts属性中设置start命令) cmd---npm (通过该命令可以查看npm后面能够设置的具体命令) package.json: { "scripts":{ "start": "node demo.js", // cmd环境中,npm start命令 就相当于 node dem

  • Vue3中使用pnpm搭建monorepo开发环境

    目录 前言 Pnpm 和 Monorepo 搭建开发环境 创建项目 配置 monorepo 安装依赖 初始化Typescript 准备两个模块 shared reactivity 编写构建脚本 完成第一次调试 小结 前言 Vue3 源码阅读系列,计划从环境搭建开始,将 Vue3 的响应式模块,运行时模块和编译器模块,以及状态库 Pinia.路由库 Vue-Router的核心原理做一个梳理.这大概是一个漫长的过程.祝自己不要烂尾,祝大家有所收获. Pnpm 和 Monorepo Pnpm 是新一代

  • 支持cjs及esm的npm包实现示例详解

    目录 正文 tsc cjs esm package.json rollup rollup.config.js package.json webpack webpack.config.js package.json esbuild 正文 模块化是一个老生常谈的问题了,打包工具层出不穷. 那么,如何利用这些打包工具去打出既支持cjs,又支持esm的npm包呢. 这篇文章不涉及概念,是一些打包实测. demo repo: github.com/FrankKai/np… 可以clone下来,本地构建测试

  • pm2与Verdaccio搭建私有npm库过程详解

    目录 前言 一般私有化的npm仓库有以下几种方法实现: 下面对各个方案进行一个粗浅的对比: 为什么选用Verdaccio? 安装 修改配置 配置文件 权限把控 部署 docker部署 pm2部署 管理npm仓库源 npm包发布 注册 登录 发布 删除 前言 最近开会的时候讨论到前端组件库搭建,因为需要多人协作,使用npm link等都比较麻烦,且当业务规模较大了之后,我们一般会有自己的脚手架,自己的全局工具包等等.其中可能包含了自身的业务代码不能公开,因此我们都需要一个私有化的npm仓库. 一般

  • NPM配置私服构建内网中央仓库过程详解

    目录 写在前面 1. 概述 2. 部署nexus 3. 几个概念 3.1 代理 3.2 本地包 3.3 包分组 4. 配置NPM包 4.1 配置本地包 4.2 配置代理 4.3 配置包分组 4.4 配置好后我们就可以进行发布和下载 4.5 遇到的问题 4.5.1 在登录的时候遇到的问题 4.5.2 登录报错 写在前面 目前大部分的项目,基本上都采用了前后端分离的框架.随着项目的不断做大做强,框架就会变得很庞大. 那么前端的框架,也是会变得不断的臃肿.不同的模块项目前端,可能有些公共的方法,都是共

  • 10分钟内讲解Npm脚本使用教程

    目录 引言 1.什么是npm脚本? 2.原则 3.通配符 4.传递参数 5.执行顺序 6.默认值 7.钩子 8.缩写形式 9.变量 10.常见脚本示例 11.使用nrm管理npm镜像 引言 使用Node进行开发时,必须使用npm,脚本是npm的最强大和最常见的功能之一. 我将在本文中介绍如何使用npm脚本. 1.什么是npm脚本? Npm允许您使用文件中的scripts字段定义脚本命令package.json. { // ... "scripts": { "build&quo

  • 10分钟学会写Jquery插件实例教程

    有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法.分享给大家供大家参考之用.具体方法如下:   具体而言,其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍.   现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正

  • Python编程django实现同一个ip十分钟内只能注册一次

    很多小伙伴都会有这样的问题,说一个ip地址十分钟内之内注册一次,用来防止用户来重复注册带来不必要的麻烦 逻辑: 取ip,在数据库找ip是否存在,存在判断当前时间和ip上次访问时间之差,小于600不能注册,到登录界面,大于600可以注册,设计一个数据库来存储这个ip地址和访问时间, class Ip(models.Model): ip=models.CharField(max_length=20) time=models.DateTimeField() class Meta: verbose_na

  • django实现同一个ip十分钟内只能注册一次的实例

    很多小伙伴都会有这样的问题,说一个ip地址十分钟内之内注册一次,用来防止用户来重复注册带来不必要的麻烦 逻辑: 取ip,在数据库找ip是否存在,存在判断当前时间和ip上次访问时间之差,小于600不能注册,到登录界面,大于600可以注册, 设计一个数据库来存储这个ip地址和访问时间, class Ip(models.Model): ip=models.CharField(max_length=20) time=models.DateTimeField() class Meta: verbose_n

  • 10分钟快速上手VueRouter4.x教程

    目录 写在前面 URL.hash与History 安装与使用流程 router-link和router-view router-link router-view 路由懒加载 动态路由 匹配所有路由 路由嵌套 写在最后 写在前面 Vue Router是Vue团队的研发的一款与Vue.js核心深度集成的一款路由插件,使Vue构建单页面程序变得非常的简单:Vue Router目前最新版本是4.X,也是Vue3推荐使用的版本,这篇文章我们就来学习一下Vue Router4.X. URL.hash与His

  • shell 脚本之用ab每隔30分钟并发一次休息10分钟

    一.脚本如下: #!/bin/bash echo "程序开始启动!" echo "程序每隔15分钟停一次休息10分钟" while true do echo "本轮循环开始执行! 本次并发测试30分钟!" ab -n 738100 -c 410 https://mybank.nbcb.com.cn/cc-test echo " 本轮测试结束 休息10分钟 !" sleep 10m done echo " 程序测试结束

  • 为Java程序员准备的10分钟Perl教程

    1.从基础开始 不像java,Perl不需要"main"方法作为入口点.要运行一个简单的Perl程序如下: 复制代码 代码如下: # comment starts with "#" # the name is hello.pl print "Hello Perl!"; 只需执行: perl hello.pl 2. 日期类型 在Perl中的日期类型是非常简单,它有3种类型:标量,数组和Hash. 标是一个单值,它基本上可以是任何其他比数组或哈希.

  • 30分钟就入门的正则表达式基础教程

    本文目标30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它. 如何使用本教程 最重要的是--请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门--除非你是超人 :) 别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有你想像中的那么困难.当然,如果你看完了这篇教程之后,发现自己明白了很多,却又几乎什么都记不得,那也是很正常的--我认为,没接触过正则表达式的人在看完这篇教程后,能把提到过的语法记住80%以

  • Apache Ant自动化脚本入门教程及常用命令介绍

    一 Ant简介 Apache Ant是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的自动化构建.它是Apache软件基金会JAKARTA目录中的一个子项目,它有以下的优点: 跨平台性.Ant是纯Java语言编写的,所以具有很好的跨平台性 操作简单.Ant是由一个内置任务和可选任务组成的.Ant运行时需要一个XML文件(构建文件). Ant通过调用target树,就可以执行各种任务.由于Ant构建文件 是XML格式的文件,所以很容易维护和书写,而且结构清晰

  • python爬虫_实现校园网自动重连脚本的教程

    一.背景 最近学校校园网不知道是什么情况,总出现掉线的情况.每次掉线都需要我手动打开web浏览器重新进行账号密码输入,重新进行登录.系统的问题我没办法解决,但是可以写一个简单的python脚本用于自动登录校园网.每次掉线后,再打开任意网页就是这个页面. 二.实现代码 #-*- coding:utf-8 -*- __author__ = 'pf' import time import requests class Login: #初始化 def __init__(self): #检测间隔时间,单位

随机推荐