RequireJS + WordPress

以前、こんな記事を書いた。 Bower + RequireJS - Code to Fab

そもそもなんでこんなことをしていたかと言えば、WordPress のテーマ用の開発だったのだが、こんなに準備しても冷静に考えれば WordPress の場合は PHP の方で JavaScript の実行が制御されてしまうから、当然のごとくぽっと置いただけではうまくいかない。 調べてみると、wp_enqueue_scripts() を使って以下のようにすればいいらしい：

JavaScript を呼び出したい WordPress 側：

<?php
  // WordPress の関数を使って baseUrl のパスを作成
  $componentsUri = get_template_directory_uri() . '/js/components';
  // wp_enqueue_script を使って require.js を呼び出し
  wp_enqueue_script('requirejs', $componentsUri.'/requirejs/require.js');
  // require.js に baseUrl のパスを渡す
  wp_localize_script('requirejs', 'require', array(
      'baseUrl' => $componentsUri,
      'deps'    => array( get_template_directory_uri() . '/js/main.js')
  ));
?>

呼び出される main.js 側：

// 渡された変数を使って baseUrl をセット
requirejs.config({
  baseUrl: requirejs.toUrl('')
});

これだけで OK 。

割とすっきりかける。 Browserify ならもっと楽に書けそう。

参考： WordPress › WordPress Ideas — RequireJS