Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
52
Help us understand the problem. What is going on with this article?
@tkdn

browserify - jqueryと依存するプラグインをどうにかしたい

More than 5 years have passed since last update.

こないだこういう記事書いたんですが、まったくなってない、完全に間違ってたので見直しました。

window.$ に exports するための browserify-shim

完全に勘違っていたんですが、browserify-shim はrequire('hoge')するためにシンボリックリンクを張るためのものじゃなかった。

なんというか、グローバルに外出し exports できるもんと認識しなおした。

package.json のdependencies, devDependenciesに書いてあるものであれば、まったく問題なくrequireできる。

hoge.js
var $ = require('jquery'); // もしnpmで入れてれば特にbrowserify系の記述は必要ない

生のjquery使うんならこれだけでいいっぽいけど、ただjqueryプラグイン使うなら結局exportsしないと使えなさそう。そこでbrowserify-shim。

package.json
{
  "browserify": {
    "transform": [
      "browserify-shim",
    ]
  },
  "browserify-shim": {
    "jquery": "$"
  }
}

jqueryの$をグローバルオブジェクトととして使えるようexportsしてよ、とpackage.json内にbrowserify用に記載しておけば、

hoge.js
require('jquery'); // var $ = require('jquery'); しなくてもexportされる

これで自由にjquery使える。ブラウザでアクセス、コンソールにjquery構文打ってデバッグも出来る。(ちなみに最初のほうだと、$('p') みたいなセレクタまではおっかけられるけど、$('p').addClass('hoge')みたいなのはコンソール上でできない。exportsしてないから当然なんだけど、なんとなく分かるような分からないような。)

jQueryプラグインどうしよう問題

上のから引き続き、

hoge.js
require('jquery');
require('jquery.plugin01');
require('jquery.plugin02');

みたいなことがしたかったら、npmでjqueryプラグインも入れてしまおう。package.jsonのdependencies, devDependencies に入っている名称がrequireできる。もうこの際bowerとかやめてnpm一本でいいじゃねーか。

カスタムしたjqueryのシンボリックをpackage.jsonで定義

して、require('jquery');もやりたい。
ajax省いたり、animation省いたりしてカスタムビルドしたjqueryを使いたい(npmで入れるとそれらを可能にするGruntfile.jsとかなしで落ちてくるのはなんでか気になってるんだけど ※jqueryカスタムビルド参考)、そんなときnode_modulesにもpackage.json にもjqueryなんかなくても、シンボリックをはることが出来る。

package.jspn
  "browser": {
    "jquery": "./vendor/jquery/dist/jquery.js" //カスタムjqueryを置いたとこ
  }

この時、package.jsonにjqueryがあったとしてもこちらが優先される様子。

AMD commonJS とかに対応してる jQueryプラグイン

この辺見てもらうと分かるんですが、こういった記載があると依存関係解決しようとしてプラグイン側で定義したjqueryもさらにbundleされたりするので、この辺のところもう少し調べておこうと思った。


少しgithubにもまとめた。本日は以上です。

52
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mediba
進化を続けるモバイル業界において、企業とユーザーをつなぐサービスを提供

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
52
Help us understand the problem. What is going on with this article?