npmでインストールしたjQueryをHTMLファイルに組み込む

npmを使って、jqueryをインストールします。

$ npm install jquery --save


jqueryを使ったサンプルスクリプトを作ります。

'use strict';

const $ = require('jQuery');

$(function () {
  $('h1').css('color', 'red');
});


このままでは、HTMLファイルに組み込んで動かすことはできません。
browserify(ブラウザリファイ)というツールを使って、HTMLファイルに組み込めるように変換します。
まず、browserifyをインストールします。

$ npm install -g browserify


変換前のファイルと変換後のファイルを指定し、browserifyを実行します。

$ browserify scripts/src/index.js -o scripts/dist/index.js


HTMLファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
  <script src="scripts/dist/index.js"></script>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>


Webブラウザで表示し、Hello World!が赤色で表示されば成功です。