Databases
StackOverflow2013
Postsdbo
PORequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
    primarykey
    data
    text
    <p>I'm using RequireJS on a multipage project, with a Javascript folder structure that looks kinda like this (how do you make those fancy dir trees again in Markdown?):</p> <pre><code>common.js lib/ -- jquery-1.9.1.min.js -- modernizr-2.6.2.min.js -- underscore-amd.min.js page/ -- index.js -- start.js -- checkout.js </code></pre> <p>Anyway, <code>common.js</code> is my main script file that is where I set up the configuration parameters. This is what that looks like:</p> <p><strong>common.js file</strong></p> <pre><code>// Configure RequireJS requirejs.config({ baseUrl: "assets/js/lib", paths: { page: '../page', jquery: [ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min', //If the CDN location fails, load from this location 'jquery-1.9.1.min' ], modernizr: [ '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min', //If the CDN location fails, load from this location 'modernizr-2.6.2.min' ], underscore: [ 'underscore-amd.min' ] } }); </code></pre> <p>All the page calls work as expected (with the CDN location being loaded), but I can't get my head around the minification part. The <code>r.js</code> optimizer simply refuses to cooperate, throwing an <code>Error: paths fallback not supported in optimizer. Please provide a build config path override for underscore</code> even though Underscore doesn't have a CDN specified.</p> <p><strong>build.js file</strong></p> <pre><code>{ appDir: '../www', baseUrl: 'js/lib', dir: '../www-built', mainConfigFile: '../www/assets/js/common.js', modules: [ //First set up the common build layer. { //module names are relative to baseUrl name: '../common', include: ['jquery', 'modernizr', 'underscore' ] }, // Now the page scripts { //module names are relative to baseUrl/paths config name: '../page-index', include: ['page/index'], exclude: ['../common'] }, ], paths: { jquery: "empty", modernizr: "empty" }, optimize: "uglify2", removeCombined: true } </code></pre> <p>Please help me figure out how to build this project to create the <code>common.js</code> script along with the individual page scripts. </p> <p>(Note: I based the structure of my <code>build.js</code> file on <a href="https://github.com/requirejs/example-multipage" rel="nofollow noreferrer">this example</a></p> <h2>Updated!</h2> <p>I've updated the question to include the correct syntax for <code>empty:</code> (thanks Travis!), and now the build runs without error. However, my JS files are not concatenated or uglified. The CSS files are, at the import points, so something's happening. Complete <code>build.js</code> file below (forgive me, but she's a tall one):</p> <pre><code>{ appDir: '../www', baseUrl: 'assets/js', // relative to appDir dir: '../www-built', mainConfigFile: '../www/assets/js/common.js', modules: [ //First set up the common build layer. { //module names are relative to baseUrl name: 'common', //List common dependencies here. Only need to list //top level dependencies, "include" will find //nested dependencies. include: ['jquery', 'modernizr', 'underscore', 'bootstrap' ] }, //Now set up a build layer for each page, but exclude //the common one. "exclude" will exclude nested //the nested, built dependencies from "common". Any //"exclude" that includes built modules should be //listed before the build layer that wants to exclude it. //"include" the appropriate "app/main*" module since by default //it will not get added to the build since it is loaded by a nested //require in the page*.js files. { //module names are relative to baseUrl/paths config name: 'pages/home', include: ['pages/home'], exclude: ['common'] }, { //module names are relative to baseUrl/paths config name: 'pages/start', include: ['pages/start'], exclude: ['common'] }, { //module names are relative to baseUrl/paths config name: 'pages/checkout', include: ['pages/checkout'], exclude: ['common'] }, ], paths: { jquery: "empty:", modernizr: "empty:" // underscore: "empty:" }, optimize: "uglify2", optimizeCss: "standard", removeCombined: true, preserveLicenseComments: false } </code></pre> <h2>Final Update (Yaay! It's working)</h2> <p>Thanks to Travis below, everything is working great! (the files are getting minified and concatenated). Since his solution is hosted on Dropbox, and could be lost in the future (who knows amirite?), I'll just sum up the fixes he made:</p> <h3>1. Don't mix <code>define</code> and <code>require</code> calls in a single file.</h3> <p>I had a couple of files where I'd mixed them like so:</p> <p><strong>page/start.js</strong></p> <pre><code> define(['jquery','underscore'],function($,_) { ... }); require(['jquery','page/start'], function($, Y) { // BAD! ... }); </code></pre> <p>and the fix was to do this:</p> <p><strong>page/start.js</strong></p> <pre><code> require(['jquery','app/start_helper'], function($, Y) { ... }); </code></pre> <p><strong>app/start_helper.js</strong></p> <pre><code> define(['jquery','underscore'],function($,_) { ... }); </code></pre> <h3>2. It's <code>"empty:"</code> not <code>"empty"</code></h3> <p>That's a tricky one, though the RequireJS docs mention them.</p> <h3>3. Because</h3> <p>what kind of list has just 2 bullet points?</p> <hr> <p>Awesomelicious - now it works like a charm :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USFloatingRock
    1. USFloatingRock
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PORequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PORequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
      1. USFloatingRock
      1. VTFavorite
    1. COAnyone? It's quiet over here :(
      singulars
      1. PORequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
      1. USFloatingRock
    2. COHave you tried adding a CDN for underscore? There's one here: //cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js
      singulars
      1. PORequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
      1. USdisatisfieddinosaur
    3. CO@skishore problem there is that it isn't wrapped (you can't use a non-AMD module like Underscore as is in RequireJS without wrapping it in a `define` call)
      singulars
      1. PORequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
      1. USFloatingRock
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload