javascript - RequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery) -
i'm using requirejs on multipage project, javascript folder structure looks kinda (how make fancy dir trees again in markdown?):
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 anyway, common.js main script file set configuration parameters. looks like:
common.js file
// configure requirejs requirejs.config({ baseurl: "assets/js/lib", paths: { page: '../page', jquery: [ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min', //if cdn location fails, load location 'jquery-1.9.1.min' ], modernizr: [ '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min', //if cdn location fails, load location 'modernizr-2.6.2.min' ], underscore: [ 'underscore-amd.min' ] } }); all page calls work expected (with cdn location being loaded), can't head around minification part. r.js optimizer refuses cooperate, throwing error: paths fallback not supported in optimizer. please provide build config path override underscore though underscore doesn't have cdn specified.
build.js file
{ appdir: '../www', baseurl: 'js/lib', dir: '../www-built', mainconfigfile: '../www/assets/js/common.js', modules: [ //first set common build layer. { //module names relative baseurl name: '../common', include: ['jquery', 'modernizr', 'underscore' ] }, // page scripts { //module names relative baseurl/paths config name: '../page-index', include: ['page/index'], exclude: ['../common'] }, ], paths: { jquery: "empty", modernizr: "empty" }, optimize: "uglify2", removecombined: true } please me figure out how build project create common.js script along individual page scripts.
(note: based structure of build.js file on this example
updated!
i've updated question include correct syntax empty: (thanks travis!), , build runs without error. however, js files not concatenated or uglified. css files are, @ import points, something's happening. complete build.js file below (forgive me, she's tall one):
{ appdir: '../www', baseurl: 'assets/js', // relative appdir dir: '../www-built', mainconfigfile: '../www/assets/js/common.js', modules: [ //first set common build layer. { //module names relative baseurl name: 'common', //list common dependencies here. need list //top level dependencies, "include" find //nested dependencies. include: ['jquery', 'modernizr', 'underscore', 'bootstrap' ] }, //now set build layer each page, exclude //the common one. "exclude" exclude nested //the nested, built dependencies "common". //"exclude" includes built modules should //listed before build layer wants exclude it. //"include" appropriate "app/main*" module since default //it not added build since loaded nested //require in page*.js files. { //module names relative baseurl/paths config name: 'pages/home', include: ['pages/home'], exclude: ['common'] }, { //module names relative baseurl/paths config name: 'pages/start', include: ['pages/start'], exclude: ['common'] }, { //module names relative 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 } final update (yaay! it's working)
thanks travis below, working great! (the files getting minified , concatenated). since solution hosted on dropbox, , lost in future (who knows amirite?), i'll sum fixes made:
1. don't mix define , require calls in single file.
i had couple of files i'd mixed them so:
page/start.js
define(['jquery','underscore'],function($,_) { ... }); require(['jquery','page/start'], function($, y) { // bad! ... }); and fix this:
page/start.js
require(['jquery','app/start_helper'], function($, y) { ... }); app/start_helper.js
define(['jquery','underscore'],function($,_) { ... }); 2. it's "empty:" not "empty"
that's tricky one, though requirejs docs mention them.
3. because
what kind of list has 2 bullet points?
awesomelicious - works charm :)
looks requirejs thinks you're trying provide paths fallback underscore, since you're specifying path value array. try doing string instead.
paths: { underscore: 'underscore-amd.min' } also note correct symbol empty paths empty: (with ':') not empty.
finally, unrelated side note @ lodash imho more customizable, cross-browser compliant, faster underscore replacement identical api , it's hosted on cdnjs , amd-compliant
update
following on conversation within comments, here's updated version of project: https://dl.dropboxusercontent.com/u/21823728/so_rjs.tar.gz
as mentioned in comments, problem seemed defineing modules within same file requiring modules in, , believe causing r.js believe these modules had no main entry point. convention separate out module definitions files require modules.
notice there's app folder under assets/js each module used defined within page modules stored. page modules require these modules in. when re-ran r.js (using uglify2 optimizer) seemed work expected.
furthermore, removed redundancy build.js file (you have specify baseurl in mainconfigfile if that's 1 you're using build configuration well). finally, may want using shim config if want attach jquery , bootstrap globally every page. otherwise should explicitly list them dependencies when need them.
finally 1 last piece of advice may want @ cutting down on number of require within each file. of pages wrap in 1 require call , separate out different logic functions save space on event queue , cycles of having redundantly call require function.
Comments
Post a Comment