browserify を使って、jQueryとClEditorを単一ファイルにコンパイルおよびrequire可能にしたい

Question

現在、Rails5.0 + Vue.js2.0でシングルページのアプリケーションを開発しており、
一部ページにhtmlエディタを追加するためにcleditorを利用しようと試みています。

現在gulp + browserifyを使って一つのminifyされたjsファイルをビルドしているのですが、
jQueryおよびcleditorのソースコードもビルド後のjsファイルにgulp実行で組み込みたいと考えています。

また、htmlエディタを使用するページは極一部なので、使用するページのコンポーネントでのみ
require('jquery')およびrequire('cleditor')等として依存関係を作りたいと考えています。

上記を達成するためのツールとして、browserify-shimが有効そうだということで、
各解説を検索し色々と試行錯誤したのですが、期待通りの結果どころか、解説通りにもなりません。

作業時は、主にこちらのページを参照しました。

###package.json

{
 ...
 (略)
  "browserify": {
    "transform": [
      "babelify",
      "browserify-shim",
      "vueify"
    ]
  },
  "browser": {
    "vue": "vue/dist/vue"
  },
  "browserify-shim": {
    "jquery": "$",
    "../client/vendor/cleditor/jquery.cleditor.js" : {
      "depends": ["global:$"],
      "exports": "ClEditor"
    }
  },
  (略)
  ...

cleditorはnpmに公開されていなかったので、ソースコードをDLしたものをclient/vendorに配置しています。

###現在発生している問題

1. require('jquery')をしても、$("...")のメソッドをブラウザのコンソールから利用できない

参考先のページで挙げられているvar $ = require('jquery');の例と同じ状態です。上記設定でコンポーネントにrequire('jquery');と記述してやれば、後はgulpからbrowserifyを実行することで$がグローバルにexportされていることを期待していました。

1. $ではなくjQueryをexportできない

上記設定ファイルの"global:$"と"jquery": "$"部分の$をjQueryに変更してやれば、グローバルにjQueryがexportされると思っていましたが、未定義の変数としてエラーになってしまいます。

1. cleditorがexportされない

コンポーネント側にrequire('ClEditor');と記載しても、not found moduleとなり、requireされません。
0. cleditorをrequireできても、エラーになる。
requireの引数をモジュール名ではなくファイルのパス名を直接指定すると、browserifyによってビルド後のファイルにcleditorおよびjqueryのソースコードが追加されます。しかし、cleditorのソースコードが下記のような状態になり、エラーとなってしまいます。

// cleditor is not defined
// 元のソースコードは単にcleditor = function(r, f) {...}と匿名関数を代入している。
// 検索をかけても、以下のような箇所は見つからない。
cleditor = function cleditor(r, f) {
...(略)
}

他の解説ページや、github・npmのbrowserify-shimのリファレンスも参照してみましたが、手がかりを見つけられませんでした。

• 上記package.jsonをどのように修正すれば、上記1.~4.の問題を解決できるでしょうか。いずれか一つのみでも構いません。
• 冒頭で説明させていただいた目的を達成するにあたり、browserify-shimが解決法として適切でない、という可能性は有るでしょうか。もしそうであれば、代替手段としてどのような物があり得るでしょうか。
• そもそもjQueryおよびcleditorもまとめてビルドしようというアプローチ自体が間違っているのでしょうか。素直にscriptタグを使うべきなのでしょうか。

以上、些細なことでもヒントや手がかりをいただければ幸いです。情報の不足が有れば追記いたしますので、ぜひご指摘ください。

###追記 cleditorをrequireするとエラー
browserify-shimの用途を完全に誤解していたようなので、タイトルを変更すると共に、browserifyのみでの実施に切り替えました。

jQueryをビルド後のファイル(build.jsとします)に組み込むことは成功したのですが、cleditorの組み込みが上手くいきません。
設定およびディレクトリ構成は以下の通りです。

######package.json

{
  "browserify": {
    "transform": [
      "babelify",
      "vueify"
    ]
  },
  "browser": {
    "vue": "vue/dist/vue",
    "cleditor": "./client/vendor/cleditor/jquery.cleditor.min.js"
  },
}

/
- app/
- bin/
- client/  # クライアントサイドのjsファイルを配置しています
    - app/
        - main.js
    - vendor/ # cleditor等、npmで公開されていない外部ライブラリ 
        - cleditor/
            - jquery.cleditor.min.js
        - jquery.cleditor.js
        - jquery.cleditor.css
- public/
    - app/
        - build.js
        - build.css 
- 以下略
  ...
- package.json

また、main.js内でwindow.jQuery = window.$ = require('jquery')を実行し、グローバル空間に$, jQueryを展開しています。

この状態でbrowserifyを実行すると、jQueryは正常にbuild.js内に組み込まれ、cleditorもまた、 build.js内に含まれているようです。

しかし、実際に画面を表示しようとすると、先述した「現在発生している問題」の4.が発生してしまい、jsが正常に実行されません。

Answer 1

根本的なところとして、「jQuery本体もまとめてビルド」と「browserify-shimでjQueryを呼び出す」ことは両立しません。

browserify-shimは、<script>要素など別途でグローバル空間に現れているオブジェクトをbrowserifyのrequireから使うための手段です。つまり、browserify-shimでjQueryを呼び出すようにした場合、<script>で別にjQueryを読み込んでおく必要があります。

Comments

[philomagi]

ご回答ありがとうございます。browserify-shimの用途を、完全に誤解していたようです。

browserify-shimを用いず、browserifyのみで再度試みましたが、未だ上手くいきません。
jQuery本体をビルド後のjsに組み込むのは成功するのですが、cleditorの組み込みが上手くいきません。
package.jsonを編集し、コンポーネント側の記述も更新しましたが、cleditor部分が何故か"cleditor = function cleditor(...){ ... }" とされており、"cleditor is not defined"とエラーが出されてしまいます。
詳細については、質問本文に追記しております。

[philomagi]

最終的に、cleditorではなくvue-html-editorをVue2.0用に改造したものを利用することにしました。
ご回答ありがとうございました。