CODEWITHSUNDEEP
jquery-uibrowserify
Maxim Yefremov
Maxim Yefremov

Reputation: 14175

using jquery-ui with browserify

My source browserify coffeeify file:

$ = jQuery = require 'jquery'
require 'jq-ui'
$ ->
    jqueryUiIsLoaded = jQuery.ui
    console.log "jquery-ui is loaded: #{jqueryUiIsLoaded}"

which I convert to main.js with command:

browserify source.coffee -t coffeeify > main.js --debug

My package.json:

{
  "name": "jquery_ui_test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "main": "browserify source.coffee -t coffeeify > main.js --debug"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.min.js",
    "jq-ui": "./node_modules/jquery-ui/jquery-ui.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "jq-ui": {
      "exports": "jq-ui",
      "depends": [
        "jquery:jQuery"
      ]
    }
  },
  "dependencies": {
    "coffee-script": "*"
  },
  "devDependencies": {
    "browserify": "^6.0.2",
    "coffeeify": "^0.7.0",
    "jquery": "^2.1.1",
    "jquery-ui": "^1.10.5"
  }
}

My html:

<html>
<head>
    <script src='./main.js'/>
</head>
</html>

In browser console I see that jquery ui is not loaded:

jquery-ui is loaded: undefined source.coffee:5

What should I do to make jquery-ui load with browserify?

Upvotes: 2

Views: 3896

Answers (1)

Maxim Yefremov
Maxim Yefremov

Reputation: 14175

The solution was in using debowerify: I installed jquery and jquery-ui via bower. My package.json is:

{
  "name": "jquery_ui_test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "main": "browserify source.coffee -t coffeeify -t debowerify > main.js --debug"
  },
  "dependencies": {
    "coffee-script": "*"
  },
  "devDependencies": {
    "browserify": "<6",
    "coffeeify": "^0.7.0",
    "debowerify": "^0.8.2"
  }
}

My source.coffee is :

$ = window.jQuery = require("jquery")
require "jquery-ui"
jqueryUiIsLoaded = jQuery.ui
console.log "jquery-ui is loaded: #{jqueryUiIsLoaded}"

And browser console output is:

jquery-ui is loaded: [object Object]

So jquery-ui is working.

Upvotes: 1

Related Questions