npmでインストールしたjQueryをHTMLファイルに組み込む
npmを使って、jqueryをインストールします。
$ npm install jquery --save
'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!が赤色で表示されば成功です。