如何在hexo应用程序中访问npm安装的软件包 [英] How to access npm-installed package in hexo app
问题描述
我正在使用Hexo创建一个Web应用程序.我想在我的其中一个页面中使用一个名为slick-carousel的软件包.顺便说一下，这个包也包含jQuery.因此，我通过npm成功安装(并-保存")了该软件包.程序包显示在我的node_modules文件夹和package.json文件中.
I am creating a web app using Hexo. I want to use a package called slick-carousel in one of my pages. This package also contains jQuery by the way. So I successfully installed (and "--save"ed) the package via npm. The package shows up in my node_modules folders and on my package.json file.
我希望这样做之后，我应该可以在markdown文件中同时访问jQuery和slick函数，但我没有.当我在浏览器中呈现生成的页面时，会提示未定义jQuery".我在这里错过了哪一步，这样我才能真正使用已安装的软件包?
I expected that after doing this, I should have access to both jQuery and slick functions in my markdown files, but I don't. When I render the generated page on my browser, I am told that 'jQuery is undefined.' What step am I missing here so that I can actually use my installed packages?
这是我添加到我的markdown文件中的脚本标签，试图使之工作:
Here is the script tag I added to my markdown file that I am trying to make work:
<script>
jQuery(document).ready(function(){
jQuery('.carousel').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>
<script>
jQuery(document).ready(function(){
jQuery('.carousel').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>
我仍在尝试完全掌握已安装的软件包与应用程序其余部分之间的关系，因此，如果这个问题甚至没有任何意义，请原谅我.您能给我的任何见解或解释将不胜感激！
I am still trying to fully grasp the relationship between installed packages and the rest of my application, so forgive me if this question doesn't even make sense. Any insight or explanation you can give me would be much appreciated!
推荐答案
仅仅是因为脚本位于node_modules中，并不意味着它们会自动添加到您的项目前端.
Just because the scripts are in node_modules, doesn't mean they are automatically added to your projects frontend.
有多种方法可以满足您的需求:
There are different ways to achieve what you need:
与其试图摆弄package.json和模块要求，不如尝试获得所需的最简单的方法是
将jquery和slick-carousel的分发文件移出
将node_modules文件夹中的内容放入Hexo可以使用的文件夹中
他们更好(快速阅读后应该为source)，然后您
只需将您的JS文件链接到HTML布局中，一切就可以正常工作
Instead of trying to fiddle around with package.json and module requirements, the probably easiest way to get what you want is
moving the distribution files of jquery and slick-carousel out
of the node_modules folder into a folder where Hexo can work with
them better (after a quick read-up it should be source) then you
just link your JS file in your HTML layout and everything should work fine
使用某种任务工具包(例如 Gulp 或
With using some kind of task toolkit (like Gulp or Grunt) you could write tasks that automatically move the assets out of the node_modules folder inside a folder that is accessible by Hexo, a Gulp task could look something like this:
gulp.task('jquery', function () {
return gulp.src('./node_modules/jquery/dist/jquery.js')
.pipe(gulp.dest('./source/js'))
})
使用要求(如果支持)
我以前从未使用过Hexo，所以我不知道它的内部结构，但有时可能可以只在Javascript文件中使用require来加载已下载的模块，因此您可以使用
Using require (if supported)
I never used Hexo before, so I have no idea of it's internals, but sometimes it might be possible to just use require in the Javascript files to load modules that were downloaded, so you could use
window.jQuery = window.$ = require('jquery')
例如，直接将脚本加载为模块.
for example, to directly load the script as module.
您可能需要自己进行测试，但这可能是在Node.js项目中处理资产的三种最常见的方法.
You might need to test this yourself, but these are probably the three most common ways to handle assets in Node.js projects.
这篇关于如何在hexo应用程序中访问npm安装的软件包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
