yarnでjQueryを取得し、Webpackでbuildして実行する

簡易メモです。

最近流行りのReactやAngularなどを利用している方からすると、ごく当然の内容ですが。

前提条件

• node.jsがインストールされている

• yarnがインストールされている

• yarnの開発環境を初期化

  作業用のディレクトリで以下のコマンドを実行する

    yarn init
  

  いくつかの質問が出て来るが、ひとまず Eneter で全て回答

• yarnでjQueryをインストールする

  yarn に追加するモジュールを add しインストールする

    yarn add jquery  
    yarn
  

• webpackの導入

  上の作業でjqueryはインストールは完了しているが、インストールされている先がnode_modulesの下にいんすとーるされているため、普段利用するような形式で利用するのはめんどい そのため、modulesをビルドするwebpackを導入する

   yarn add webpack
   yarn
  

• index.jsの作成

  jQueryを動作する環境の準備が出来たので、実際にコードを実装していく

var $ = require('jquery');

$(function () {
alert("ok");
});

• package.jsonにbuildの設定を記述する

 "scripts": {
    "build": "webpack app/index.js dist/bundle.js"
  }

• buildの実行

npm run build

dist/bundle.js というjQueryを含んだ1つのJSファイルが出来る。

このファイルをhtmlから読み込むことで、jQueryが普段通り動作する。