1

Hexo を使用して Web アプリを作成しています。ページの 1 つで slick-carousel というパッケージを使用したいと考えています。ちなみに、このパッケージにはjQueryも含まれています。そのため、npm経由でパッケージを正常にインストール（および「--save」）しました。パッケージは node_modules フォルダーと package.json ファイルに表示されます。

これを行った後、マークダウン ファイルで jQuery と洗練された関数の両方にアクセスできるはずだと思っていましたが、そうではありません。生成されたページをブラウザでレンダリングすると、「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、Hexo がそれらをより適切に処理できるフォルダーに移動することです (簡単な読み取りの後slick-carousel-node_modulesそれからsource、JS ファイルを HTML レイアウトにリンクするだけで、すべて正常に動作するはずです。

アセットの自動移動

ある種のタスク ツールキット ( GulpやGruntなど) を使用すると、Hexo がアクセスできるフォルダー内のフォルダーからアセットを自動的に移動するタスクを作成できnode_modulesます。Gulp タスクは次のようになります。

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

require の使用 (サポートされている場合)

以前に Hexo を使用したことがないため、その内部構造についてはわかりませんがrequire、ダウンロードしたモジュールをロードするために Javascript ファイルで使用できる場合があるため、次のように使用できます。

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

たとえば、スクリプトをモジュールとして直接ロードします。

これは自分でテストする必要があるかもしれませんが、これらはおそらく Node.js プロジェクトでアセットを処理する最も一般的な 3 つの方法です。

于 2016-09-30T08:21:22.393 に答える