RequireJS - AMD

[sgentile]

Does Cassette play well with RequireJS script loading ?

[andrewdavey]

I've been experimenting with this a bit. Currently it requires some work to tell RequireJS how to map module names to actual Cassette URLs.

Eventually I want to create a plugin called Cassette.RequireJS that generates the plumbing.

[sgentile]

thanks for the quick response.

Could you give me a snippet, or an example of that effort to map to the Urls ?

On Tue, May 8, 2012 at 12:41 PM, Andrew Davey < [email protected]

wrote:

I've been experimenting with this a bit. Currently it requires some work to tell RequireJS how to map module names to actual Cassette URLs.

Eventually I want to create a plugin called Cassette.RequireJS that generates the plumbing.

---

Reply to this email directly or view it on GitHub: https://github.com/andrewdavey/cassette/issues/248#issuecomment-5579480

[andrewdavey]

The Bundles.GetReferencedBundles() method returns all bundles currently referenced by a page. Try something like:

<script>
var require = {
 paths: {
    @(string.Join(",\n" + Bundles.GetReferencedBundles().Select(b => b.Path.Split('/').Last() + ": '" + Bundles.Url(b) + "'"))
  }
};
</script>
<script src="require.js"></script>

[chris-ux]

What about the bundling and optimization that require.js optimizer provides (module packaging/renaming building based on requirements of the define scripts, not just minification).

Can we get support for AMD module packaging which is different than just packaging/minification)

( http://requirejs.org/docs/api.html#modulename ) ( https://github.com/jrburke/r.js#what-makes-it-special )

[andrewdavey]

I've been doing some work integrating Cassette and RequireJS in this project: https://github.com/andrewdavey/reference-application/tree/master/App

It extends Cassette to generate AMD modules from bundles. There's a fair amount of code (specifically https://github.com/andrewdavey/reference-application/tree/master/App/Infrastructure/Amd ) but it does work :)

[chris-ux]

This is great!

so given

• scripts/
  • modules/
    • file1.js
  • vendor/
    • jQuery.{version}.js
    • knockout.{version}.js
    • modernizr.{version}.js
  • main.js
  • require.js

file1 being wrapped in define(['jQuery'], fn($){ /code/ });

I should be able to expect a packaged minified library file that contains a "named" module entry similar to

define("file1", ["jQuery"], function($) {
     //code
});

I also have a decently common but complex require.config for my project using the shims for jQuery plugins and non-amd scripts into a namespace to keep global clean.

require.config({
            paths: {
                //3rd party requirements
                jquery:                 baseUrl + "vendor/jquery/jQuery.1.7.2.min",
                jQuery:                 baseUrl + "vendor/jquery/jquery", //shim to use $.noconflict
                jqValidation:           baseUrl + "vendor/jquery/jquery.validate.min",
                jqValUnobtrusive:       baseUrl + "vendor/jquery/jquery.validate.unobtrusive.min",
                jqValUnobtrusiveExt:    baseUrl + "vendor/jquery/jquery.validate.unobtrusive.extensions",
                jqb_tab:                baseUrl + "vendor/bootstrap/tab",
                jqb_modal:              baseUrl + "vendor/bootstrap/modal",
                jqb_datepicker:         baseUrl + "vendor/bootstrap/datepicker",
                placeholder:            baseUrl + "vendor/jquery/jquery.placeholder-enhanced.2.0",
                toastr:                 baseUrl + "vendor/jQuery/toastr",
                knockout:               baseUrl + 'vendor/knockout/knockout',
                komapping:              baseUrl + 'vendor/knockout/knockout.mapping',
                kobindings:             baseUrl + 'src/plugins/knockout/knockout.custombindings',
                JSON:                   baseUrl + "vendor/json2",
                moment:                 baseUrl + "vendor/moment",
                //helpers
                Observer:               baseUrl + "src/utils/observer",
                formUtilities:          baseUrl + "src/utils/formUtilities",
                notify:                 baseUrl + "src/utils/notify",
                nativeTypeUtilities:    baseUrl + "src/utils/nativeTypeUtilities",
                //api
                libNamespace:                     baseUrl + "src/libNamespace",
                //api modules
                module1:                 baseUrl+ "src/modules/module1"
            },
            shim: {
                'moment': {
                    exports: 'moment'
                },
                'JSON': {
                    exports: 'JSON'
                },
                'jqValidation': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.validate'
                },
                'jqValUnobtrusive': {
                    deps: ['jquery', 'jqValidation'],
                    exports: 'jQuery.fn.validate.unobtrusive'
                },
                'jqValUnobtrusiveExt': {
                    deps: ['jquery', 'jqValidation', 'jqValUnobtrusive']
                },
                'jqb_datepicker': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.datepicker'
                },
                'jqb_tab': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.tab'
                },
                'jqb_modal': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.modal'
                },
                'placeholder': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.placeholderEnhanced'
                }
            }
});

Ideally we should be able to config this from the bundle config / register bundles.

Thank you for the dialogue and consideration!

[andrewdavey]

Yes, the sample app wraps a bare application scripts in define calls. It parses the /// <reference path="..."/> comments to generate a modules dependencies. It also knows what each module exports (any 'global' vars) and generates the necessary aliasing variables.

file1.js:

var x = {}

file2.js

/// <reference path="file1.js"/>

becomes:

define("module2", ["module1"], function(f) {
  var x = f.x;
  ...
});

It can also combine multiple vendor AMD module scripts into one bundle, by rewriting the anonymous define calls to include the module path: https://github.com/andrewdavey/reference-application/blob/master/App/Infrastructure/Amd/RewriteDefineCalls.cs (This is similar to what r.js does.)

[martin308]

Is this still in progress?

Haven't been any commits for 2 months, just wondering if I should wait a bit more or investigate other possibilities?

[andrewdavey]

Yes, but I've been busy with work recently. The master branch does contain the Cassette.RequireJS project, if you want to have a play with it. It's very much a work in progress though.

[martin308]

Cool, I might try and have a play with it this weekend :+1: :)

[lukespice]

I know this was a few years ago, but I was just looking into RequireJS and I was wondering if this work was ever completed?

[andrewdavey]

Sorry, this never really made it past the experimental phase.

[empz]

Sorry to bring this issue back again but I see there's a Cassette.RequireJS nuget package but I can't find any documentation on how to use it. https://www.nuget.org/packages/Cassette.RequireJS/

Thanks