1

我正在使用 Hexo 创建一个网络应用程序。我想在我的一个页面中使用一个名为 slick-carousel 的包。顺便说一下，这个包还包含 jQuery。所以我通过 npm 成功安装（和“--save”ed）包。该包显示在我的 node_modules 文件夹和我的 package.json 文件中。

我希望在这样做之后，我应该可以访问我的 markdown 文件中的 jQuery 和 slick 函数，但我没有。当我在浏览器上呈现生成的页面时，我被告知“jQuery 未定义”。我在这里缺少什么步骤，以便我可以实际使用已安装的软件包？

这是我添加到我试图使其工作的降价文件中的脚本标签：

<script> jQuery(document).ready(function(){ jQuery('.carousel').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true }); }); </script>

我仍在尝试完全掌握已安装的软件包与我的应用程序其余部分之间的关​​系，所以如果这个问题甚至没有意义，请原谅我。您能给我的任何见解或解释将不胜感激！

4

1 回答 1

1

仅仅因为脚本在 node_modules 中，并不意味着它们会自动添加到您的项目前端。

有多种方法可以实现您的需求：

手动移动资产

而不是试图摆弄 package.json 和模块要求，获得你想要的最简单的方法是将分发文件移出jquery和slick-carousel移出node_modules文件夹到 Hexo 可以更好地使用它们的文件夹中（在快速阅读之后 -应该是source）然后你只需将你的 JS 文件链接到你的 HTML 布局中，一切都应该正常

自动移动资产

通过使用某种任务工具包（如Gulp或Grunt），您可以编写任务，自动将资产移出node_modules文件夹，并放入 Hexo 可访问的文件夹中，Gulp 任务可能如下所示：

gulp.task('jquery', function () {
  return gulp.src('./node_modules/jquery/dist/jquery.js')
    .pipe(gulp.dest('./source/js'))
})

使用要求（如果支持）

我以前从未使用过 Hexo，所以我不知道它的内部结构，但有时可能只require在 Javascript 文件中使用来加载下载的模块，所以你可以使用

window.jQuery = window.$ = require('jquery')

例如，直接将脚本加载为模块。

您可能需要自己对此进行测试，但这可能是在 Node.js 项目中处理资产的三种最常见的方法。

于 2016-09-30T08:21:22.393 回答