イナヅマTVログ

[JavaScript] RequireJSでjQueryを読込む、require-jquery.jsを使わずに

| 0件のコメント

RequireJS は読込みをブロックすること無く複数のJavaScriptを読込むことが可能なライブラリです。
ロード後に関数を実行させたりとか現在のWeb制作に必要な機能を提供してくれています。

便利なのでしょう、すでに多くのHow toがネット上にあふれています。

読込みには別のライブラリを使っていたのですが、この良いと噂のrequire.jsを試してみます。
しかし早速つまづいたのがjQueryの読込みでした。

このrequire.jsを使ってjQueryを読込む方法はRequireJSのサイトに詳しく書かれています。
HOW TO USE REQUIREJS WITH JQUERY

解説されている方法は require.jsとjQueryをcombined(合体)させた特別なrequire-jquery.jsを使用した方法です。
これでも良いっちゃ良いけど、最新版jQueryの保証は無くなります。

できればjQueryと言えども他のJavaScriptファイルと同じように特殊な形で無く読込めると幸せです。
オリジナルのrequire.jsとjQueryの組み合わせで使えるのがベストなんだけど…

メインファイル(JavaScript)を工夫するとcombinedバージョンでなくても良いようです。
stackoverflow: jquery mobile require.js and backbone

stackoverflowは知識の宝庫です、ありがたい。

jQueryの他にも色々と必要なファイルを読込ませてみました。

index.html

<script data-main="js/main" src="js/libs/require-2.1.1.min.js"></script>

main.js

require.config({
    baseUrl: '/js/',
 
    paths: {
        requestAnimationFrame: 'libs/RequestAnimationFrame',
        tween: 'libs/tween.min',
        loadManager: 'libs/LoadManager',
        jquery: 'libs/jquery-1.8.3.min',
        underscore: 'libs/underscore-min'
    },
 
    shim: {
        underscore: {
            exports: '_'
        },
        jquery: {
            deps: ['tween', 'requestAnimationFrame', 'loadManager'],
            exports: 'jquery'
        }
    }
});
require(
    ['jquery', 'underscore', 'tween', 'loadManager', 'requestAnimationFrame'], function ($, _) {
        'use strict';
        var $w = window,
            document = $w.document,
            Array = $w.Array,
            tween = $w.TWEEN,
            loader = $w.LoadManager,
            requestAnimationFrame = $w.requestAnimationFrame
        ;
        $(function(){
            console.log('dom ready');
        });
    }
);

ファイル階層は以下の様になっています。
index.html
js
 main.js
 libs
   require-2.1.1.min.js
   jquery-1.8.3.min.js
   RequestAnimationFrame.js
   tween.min.js
   underscore-min.js
   LoadManager.js

コメントを残す

必須欄は * がついています