web-dev-qa-db-ja.com

CDNの使用とNPMによるライブラリのインストール

ただし、私は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フォルダー

次の手順を実行しました。

  1. npm init --yesによってpackage.jsonを作成しました

  2. npm install jquery --saveによるjQueryが含まれています

これで、フォルダごとに次のようになります。 enter image description here

さて、jQueryのcdnリンクを削除したので、node_modulesの「jQueryファイル」がどのようにindex.htmlに追加されるのかわかりません。

誰か助けてください。私は見当もつかない...私はブラウザでこれをやっています！

javascriptjqueryhtmlnode.jsnpm
22
Deadpool

私はあなたの質問を誤解したかもしれません...しかし、あなたはこの行をあなたのindex.htmlファイル？

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

[〜＃〜] cdn [〜＃〜]

インターネットユーザーがアクセスできるWebサイトを開発している場合は、CDNを使用します。

CDNの利点：

  • 他の多くのウェブサイトで使用されているため、ほとんどのブラウザでキャッシュされます

  • 帯域幅を減らす

その他の利点を確認してください こちら

[〜＃〜] npm [〜＃〜]

npmは、 module bundler を使用してアプリの依存関係を管理するための優れたツールです。

例：

webpack モジュールバンドラーを使用し、jQueryがインストールされていると仮定します

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

ただし、ブラウザはimportステートメントを理解しないため、webpackコマンドを使用してコードを変換する必要があります。バンドラーは、使用されているすべての依存関係をチェックし、依存関係の問題なく単一ファイルにバインドします。

便利なリンク： webpackを始めよう

15
Jamil Hijjawi

上記に加えて、ローカルへの「npm install」パッケージも：

  1. ローカルIDEにコードインテリセンスとタイプチェックを提供させてください。
  2. （Webpack）バンドリングのソースコードを提供します。これにより、すべてのJavaScriptファイルが（縮小された）単一ファイルになるため、依存関係がなくなります。
2
Jiping

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のマニュアル を参照してください。

Expressを使用していない場合は、Webサーバーのスタックマニュアルを参照する必要があります。残念ながら推測する方法はありません-これはおそらくnode.jsのような単一の最も人気のあるパッケージであるため、Express.jsの例を挙げました。

2
kamituel