如何将JS库合并到我的NPM构建脚本中？

Question

我当前的站点是使用html + css（scss）并使用NPM构建脚本构建的（请参见下文）。 现在，我想向我的网站添加一些JS库（例如：lozad）。

到目前为止，我已经为其下载了依赖项。 因为我不熟悉JS，所以我不明白我需要采取的其他步骤。 我尝试按照文档进行操作，但到目前为止无法正常工作。

我现在假设这是因为我当前的NPM构建脚本没有跟踪JS，因此任何JS都不会显示在我的devserver上。 因此，也许它确实起作用了，但还没有进行测试？

谁能指出我要使其正常工作和/或如何更新NPM脚本的方向？

  "scripts": {
    "watch:sass": "node-sass sass/main.scss css/style.css -w",
    "devserver": "live-server --browser=firefox",
    "start": "npm-run-all --parallel devserver watch:sass",
    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
    "concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
    "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
    "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
  },

  "devDependencies": {
    "autoprefixer": "^9.6.0",
    "concat": "^1.0.3",
    "node-sass": "^4.12.0",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^6.1.2",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "aos": "^2.3.4",
    "lozad": "^1.9.0",

  }
}

Answer 1

您只需要提供依赖关系的相对路径，然后像这样运行脚本即可：

"scripts": {
   ...
   "lozad": "npm run ./node_modules/lozad/index.js --argument"
}

请注意，这仅是假设数据。 真实的路径和文件可能被称为其他名称（只需查看lozad的node：modules文件夹）。

根据本文的介绍，当存在用于该依赖项的.bin文件夹时，您也可以省略路径和npm rum，但是我尚未对此进行测试。

编辑

万一您想知道如何在本地使用该库。

您必须将包添加到您的依赖项中（就像您所做的那样），然后调用

npm install

在您的项目目录中。 它将安装package.json指定的所有依赖项。

您可以通过简单地调用以下步骤来省略手动的“向文件添加依赖项”步骤：

npm install --save lozad

之后，您可以在项目中使用它，如下所示：

// using ES6 modules
import lozad from 'lozad'

// using CommonJS modules
var lozad = require('lozad')

如果您不知道要使用哪个，请尝试一下-IDE会告诉您是否出了问题。

导入库时，可以像用法说明中所述使用它。