关于javascript:你要知道的-Npm-Script-都在这里

49次阅读

共计 5150 个字符，预计需要花费 13 分钟才能阅读完成。

在拿到一个我的项目之后，如何看入口文件，如何运行我的项目，咱们都会找到 package.json 中的 script。
甚至在做我的项目做久之后，咱们会本人写一些脚本来给开发提效，但你晓得 NPM 脚本能做什么吗？你晓得如何传递一个参数给脚本？你晓得如何执行某个脚本文件么？
在这篇文章中，我将分享我如何充分利用 NPM 脚本。

介绍

NPM 脚本是 package.json 中定义的一组内置脚本和自定义脚本。他们的指标是提供一种简略的办法来执行反复的工作，比方：

  • 启动我的项目
  • 打包我的项目
  • 执行单元测试，生成测试报告之类
  • ……

那如何定义一个 NPM 脚本？须要做的就是设置它的名称，并在 package.json 文件的 script 属性中编写该脚本, 如下：

"scripts": {"test": "echo \"Error: no test specified\"&& exit 1"}

值得注意的是，NPM 中所有依赖的 node_modules bin 都能够在脚本中间接拜访，就像在门路中被援用的一样。比方：

{
    "scripts": {"lint": "./node_modules/.bin/eslint .",}
}
// 此写法与下面成果雷同
{
    "scripts": {"lint": "eslint ."}
}

命令

当初咱们能够在终端中执行 npm run test 执行对应的 script 脚本, 如下：

➜  xxx npm run test

> xx@1.0.0 test /Users/beidan/Desktop/xxx
> echo "Error: no test specified" && exit 1

Error: no test specified
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xx@1.0.0 test: `echo "Error: no test specified" && exit 1`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the xx@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/beidan/.npm/_logs/2021-02-19T06_40_42_472Z-debug.log

如果间接在终端中执行 npm test，也是能够失去一样的后果

➜  xxx npm test

> xx@1.0.0 test /Users/beidan/Desktop/xxx
> echo "Error: no test specified" && exit 1

Error: no test specified
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xx@1.0.0 test: `echo "Error: no test specified" && exit 1`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the xx@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/beidan/.npm/_logs/2021-02-19T06_40_42_472Z-debug.log

这是因为，有些脚本是内置能够应用更短的命令来执行，更容易记住。例如，上面所有的命令的成果都是一样的：

npm run-script test
npm run test
npm test
npm t

同理，npm start 也是一样

npm run-script start
npm run start
npm start

执行多个脚本

咱们可能想联合一些脚本并一起运行它们。为此，咱们能够应用 && 或 &

  • 要 顺次 运行多个脚本，能够应用 &&，例如：

    npm run lint && npm test

  • 要 并行 运行多个脚本，能够应用& 例如：

    npm run lint&npm test

留神：这仅实用于 Unix 环境。在 Windows 中，它将按程序运行。

因而，咱们在理论我的项目中能够创立一个联合了两个脚本的脚本, 以此来简化咱们的操作，如下所示：

{
    "scripts": {
        "lint": "eslint .",
        "test": "echo \"Error: no test specified\"&& exit 1",
        "ci": "npm run lint && npm test"  // 此时 npm run ci 即会顺次执行 npm run lint，npm run test
    }
}

pre & post

咱们能够为任何脚本创立“pre”和“post”脚本，NPM 会主动按程序运行它们。惟一的要求是脚本的名称 (后跟“pre”或“post”前缀) 与主脚本匹配。例如：

{
    "scripts": {
        "prehello": "echo \"--Pre \"","hello":"echo \"Hello World\"",
        "posthello": "echo \"--post\""
    }
}

如果咱们执行 npm run hello, npm 会按以下程序执行脚本:prehello, hello, posthello。输入如下：

➜  xxx npm run hello

> xx@1.0.0 prehello /Users/beidan/Desktop/xxx
> echo "--Pre"

--Pre

> xx@1.0.0 hello /Users/beidan/Desktop/xxx
> echo "Hello World"

Hello World

> xx@1.0.0 posthello /Users/beidan/Desktop/xxx
> echo "--post"

--post

谬误

当脚本以非 0 退出码完结时，这意味着在运行脚本的时候产生了谬误，并终止了执行。比方：

"scripts": {"test": "echo \"Error: no test specified\"&& exit 1"}

那么在脚本抛出谬误时，咱们会失去一些其余的细节，比方谬误号 error 和代码，具体的谬误日志门路都能够在终端获取到，如下：

➜  xxx npm run test

> xx@1.0.0 test /Users/beidan/Desktop/xxx
> echo "Error: no test specified" && exit 1

Error: no test specified
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xx@1.0.0 test: `echo "Error: no test specified" && exit 1`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the xx@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/beidan/.npm/_logs/2021-02-19T06_48_18_141Z-debug.log

静默音讯

如果想缩小谬误日志并非避免脚本抛出谬误，能够应用上面的命令来“静默”解决,（比方在 ci 中，即便测试命令失败，也心愿整个管道持续运行，就能够应用这个命令）

npm run <script> --silent
// 或者
npm run <script> -s

如果脚本名不存在时不想报错，能够应用 –if-present，比方：npm run <script> --if-present

日志等级

咱们能够应用 –silent 缩小日志，然而如何取得更具体的日志呢？还是介于两者之间？

有不同的日志级别：

"silent", "error", "warn", "notice", "http", "timing", "info", "verbose", "silly".

默认值为“notice”。日志级别确定哪些日志将显示在输入中。将显示比以后定义更高级别的任何日志。

咱们能够应用 –loglevel <level> 明确定义要在运行命令时应用的日志级别。

当初，如果咱们想获取更具体的日志，则须要应用比默认级别更高的级别（“notice”）。例如：

--loglevel <info>

咱们还能够应用一些简短的版本来简化命令：

-s, --silent, --loglevel silent
-q, --quiet, --loglevel warn
-d, --loglevel info
-dd, --verbose, --loglevel verbose
-ddd, --loglevel silly

因而，要取得最高级别的详细信息，咱们能够应用上面的命令

npm run <script> -ddd 
// 或
npm run <script> --loglevel silly

从文件中援用门路

如果脚本很简单的话，在 package.json 中保护显著会越来越简短，也越来越难保护，因而简单的脚本咱们个别会写在文件中，在
从文件中执行脚本。如下：

{
    "scripts": {
        "hello:js": "node scripts/helloworld.js",
        "hello:bash": "bash scripts/helloworld.sh",
        "hello:cmd": "cd scripts && helloworld.cmd"
    }
}

咱们应用 node <path.js> 来执行 JS 文件，应用 bash <path.sh> 来执行 bash 文件

值得注意的是，如果是 cmd 或 bat 文件，则须要先 cd 导航到对应的文件夹目录，不能像 sh，js 文件一样，间接执行，否则会报错。

拜访环境变量

在执行 NPM 脚本时，NPM 提供了一组咱们能够应用的环境变量。
咱们能够应用

npm_config_<val> 或者 npm_package_<val>

例如：

{
    "scripts": {"config:loglevel": "echo \"Loglevel: $npm_config_loglevel\"",}
}

终端输入如下：

➜  xxx npm run config:loglevel

> xx@1.0.0 config:loglevel /Users/beidan/Desktop/xxx
> echo "Loglevel: $npm_config_loglevel"

Loglevel: notice

配置参数应用 npm_config_前缀放入环境中。这里有一些例子：

咱们能够应用上面的命令获取 config

npm config ls -l

传递参数

在某些状况下，您可能须要向脚本传递一些参数。您能够应用命令开端的 — 来实现这一点。
增加到脚本中的任何 — 都会被转换成一个带有 npm 配置前缀的环境变量。
例如：

npm run <script>---<argument>="value"

例子：

{
    "scripts": {"ttt": "echo \"ttt $npm_config_firstname!\""}
}
➜  xxx npm run ttt --firstname=234 // 传入

> xx@1.0.0 ttt /Users/beidan/Desktop/xxx
> echo "ttt $npm_config_firstname!"

ttt 234! // 输入的值

命名规定

前缀

有些开源我的项目咱们能够看到，他的 script 脚本是带有前缀的，这也是一个好的命名规定，
通过：dev，：prod 来辨别环境，如下：

{
    "scripts": {
        "build:dev": "...", // 开发环境
        "build:prod": "..." // 生产环境
    }
}

公众号：前端加加

关注「前端加加」, 第一工夫获取优质文章.

我组建了一个气氛特地好的阿里巴巴内推社群，如果你对退出阿里巴巴感兴趣的话（后续有打算也能够），咱们能够一起进行面试相干的答疑、聊聊面试的故事、并且在你筹备好的时候随时帮你内推。下方加 peen 好友回复「面试」即可。

正文完
javascript
发表至： javascript
2021-05-16
 0
为什么-JavaScript-中-0102-不等于-03
关于javascript:又一个布局利器-CSS-伪类-placeholdershown
关于javascript:AntV-G6-的坑之-fitView-适配失败
关于javascript:羊了个羊-客户端暴露后台密钥-可以直接修改后台数据