Question

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

到目前为止，我已经下载了相关性。因为我不熟悉JS，所以我不明白我需要采取的其他步骤。我尝试关注the documentation，但到目前为止无法正常工作。

我现在认为这是因为我当前的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文件夹）。

根据to this article,，当存在依赖项的.bin文件夹时，您也可以省略路径和npm朗姆酒，但我尚未对此进行测试。

编辑

以防您打算在本地使用该库。

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

npm install

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

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

npm install --save lozad

之后，您可以像这样在项目中使用它：

// using ES6 modules
import lozad from 'lozad'

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

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

导入库时，可以像described at the Usage Description.

那样使用它

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

1 个答案:

编辑