使用 CDN 与通过 NPM 安装库
[英]Using CDN vs Installing library by NPM
问题描述
Though, I have been using NPM, but I do not understand how the files in the node_modules are added to my index.html and work from there.
虽然，我一直在使用 NPM，但我不明白 node_modules 中的文件是如何添加到我的 index.html 并从那里工作的。
For Example, if I have to use jQuery, its so simple.例如，如果我必须使用 jQuery，那就太简单了。 I will get the file through cdn and add in my index.html file我将通过cdn获取文件并添加到我的index.html文件中
CASE I: CDN案例一：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>
Now, I am adding not by cdns, but I will now include jQuery by NPM.现在，我不是通过 cdns 添加，但我现在将通过 NPM 包含 jQuery。 I will create a package.json file and then add jQuery by going to the respective folder and type:我将创建一个 package.json 文件，然后通过转到相应的文件夹并键入以下内容来添加 jQuery：
CASE II: NPM - node_module folder案例二：NPM - node_module 文件夹
I have now done the followign steps:我现在已经完成了以下步骤：
Created package.json by
npm init --yes通过npm init --yes创建 package.jsonIncluded jQuery by
npm install jquery --save通过npm install jquery --save包含 jQuery
Now, by folder looks like this:现在，按文件夹如下所示：
Now, as I have now removed cdn link of jQuery, I dont know how will 'jQuery file' from node_modules will be added to my index.html?现在，由于我现在已经删除了 jQuery 的 cdn 链接，我不知道 node_modules 中的“jQuery 文件”将如何添加到我的 index.html 中？
Please, someone help.请有人帮忙。 I have no clue ...I am doing this on browser!我不知道......我在浏览器上做这个！
5 个解决方案
解决方案1
35 2017-04-25 09:07:54
CDN CDN
Use CDN if you are developing a website that will be accessible by internet users.如果您正在开发可供互联网用户访问的网站，请使用 CDN。
CDN Benefits: CDN的好处：
Will be cached on most browsers because it's used by a lot of other websites
将在大多数浏览器上缓存，因为它被许多其他网站使用Reduce the bandwidth
减少带宽
check for more benefits here在这里查看更多好处
NPM新产品管理
npm is a great tool to manage dependencies in your app using a module bundler . npm 是一个很好的工具，可以使用模块捆绑器管理应用程序中的依赖项。
Example:例子：
assume using a webpack module bundler and jQuery is installed假设使用webpack模块打包器并安装了jQuery
import $ from 'jQuery'
...
var content = $('#id').html();
but the browser does not understand the import statement so you have to transpile the code with Webpack commands, the bundler will check all the used dependencies and bind them in a single file without any dependencies problems.但是浏览器不理解import语句，因此您必须使用 Webpack 命令转译代码，bundler 将检查所有使用的依赖项并将它们绑定到单个文件中，没有任何依赖项问题。
Useful links: Getting started with webpack有用的链接： webpack 入门
解决方案2
5 已采纳 2018-02-26 19:06:21
我可能误解了您的问题...但是您不能将此行添加到您的index.html文件中吗？
<script src="node_modules/jquery/dist/jquery.min.js"></script>
解决方案3
2 2019-06-01 15:18:50
in addition to above, "npm install" packages to local also:除了上面的，"npm install" 包到本地也：
- let your local IDE provide code intellisense and type-checking;让您的本地 IDE 提供代码智能感知和类型检查；
- provide source code for (Webpack) bundling, which combines all the JavaScript files to be a (minified) single file, so no dependencies.提供 (Webpack) 捆绑的源代码，它将所有 JavaScript 文件组合成一个（缩小的）单个文件，因此没有依赖项。
解决方案4
1 2017-04-25 08:29:35
I think you want to host jQuery yourself and use it within a web app running in the browser.我认为您想自己托管 jQuery 并在浏览器中运行的 Web 应用程序中使用它。
If so, you need to host this file - make it downloadable via the same web server you are using to host index.html .如果是这样，您需要托管此文件 - 使其可通过您用来托管index.html的同一网络服务器下载。
If you are using Express, you might do something like this on the server side:如果您使用 Express，您可能会在服务器端执行以下操作：
app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));
And then reference the file in index.html :然后在index.html引用文件：
<script src="/jquery/jquery.js"></script>
See Express' manual for serving static files .请参阅Express 的手册以提供静态文件。
If you're not using Express, you need to consult your web server's stack manual.如果您不使用 Express，则需要查阅 Web 服务器的堆栈手册。 No way to guess unfortunately - I gave an Express.js example because this is probably the single most popular package like that for node.js.不幸的是，无法猜测 - 我给出了一个 Express.js 示例，因为这可能是最流行的类似 node.js 的包。
解决方案5
0 2020-01-08 11:51:55
It won't be "filed" unless you link the js file in your template (replacing the CDN one).除非您在模板中链接 js 文件（替换 CDN 文件），否则它不会被“归档”。 A bundler output or your compiled and public js file needs to be linked instead of the CDN link URI.捆绑器输出或您编译的公共 js 文件需要链接而不是 CDN 链接 URI。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.