Question

虽然，我一直在使用NPM，但我不明白node_modules中的文件是如何添加到我的index.html并从那里开始的。

例如，如果我必须使用jQuery，它就这么简单。我将通过cdn获取文件并添加我的index.html文件

案例I：CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('body').css('background','red');
});
</script>
</body> 
</html>

现在，我不是通过cdns添加，但现在我将包含NPM的jQuery。我将创建一个package.json文件，然后通过转到相应的文件夹并输入：

来添加jQuery

案例II：NPM - node_module文件夹

我现在已经完成了以下步骤：

npm init --yes
npm install jquery --save

现在，文件夹看起来像这样：

现在，因为我现在已经删除了jQuery的cdn链接，我不知道如何将来自node_modules的'jQuery文件'添加到我的index.html中？

请有人帮忙。我不知道......我在浏览器上这样做了！

Answer 1

<强> CDN

如果您正在开发一个可供互联网用户访问的网站，请使用CDN。

CDN的好处：

将在大多数浏览器上缓存，因为很多其他网站都在使用
降低带宽

检查更多优惠here

<强> NPM

npm是使用module bundler管理应用中依赖关系的绝佳工具。

示例：

假设使用webpack模块捆绑器并安装了jQuery

import $ from 'jQuery'
...
var content = $('#id').html();

但是浏览器不理解import语句，所以你必须使用webpack命令来转换代码，bundle会检查所有使用的依赖项并将它们绑定在一个文件中而没有任何依赖性问题。

有用的链接：Getting started with webpack

Answer 2

我可能误解了您的问题......但是，您不能只将此行添加到index.html文件中吗？

<script src="node_modules/jquery/dist/jquery.min.js"></script>

Answer 3

我认为您希望自己托管jQuery并在浏览器中运行的Web应用程序中使用它。

如果是这样，您需要托管此文件 - 可以通过您用于托管index.html的同一个Web服务器下载该文件。

如果您使用的是Express，您可能会在服务器端执行类似的操作：

app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));

然后在index.html中引用该文件：

<script src="/jquery/jquery.js"></script>

请参阅Express' manual for serving static files。

如果您不使用Express，则需要查阅Web服务器的堆栈手册。遗憾的是没办法猜测 - 我给了一个Express.js示例，因为这可能是像node.js那样最受欢迎的软件包。

Answer 4

除上述内容外，还将“ npm install”软件包下载到本地：

让您的本地IDE提供代码智能识别和类型检查；
提供（Webpack）捆绑的源代码，该捆绑将所有JavaScript文件合并为一个（最小化的）单个文件，因此没有依赖性。

Answer 5

除非您在模板中链接js文件（替换CDN一个文件），否则它不会被“归档”。捆绑程序输出或您已编译的公共js文件需要链接，而不是CDN链接URI。

使用CDN与NPM安装库

5 个答案: