Question

183

Is it possible to stop requireJS from adding the .js file extension automatically?

rated 0 times [ 186] [ 3] / answers: 1 / hits: 20125 / 12 Years ago, mon, may 14, 2012, 12:00:00

I'm using requireJS to load scripts. It has this detail in the docs:

The path that is used for a module name should not include the .js
extension, since the path mapping could be for a directory.

In my app, I map all of my script files in a config path, because they're dynamically generated at runtime (my scripts start life as things like order.js but become things like order.min.b25a571965d02d9c54871b7636ca1c5e.js (this is a hash of the file contents, for cachebusting purposes).

In some cases, require will add a second .js extension to the end of these paths. Although I generate the dynamic paths on the server side and then populate the config path, I have to then write some extra javascript code to remove the .js extension from the problematic files.

Reading the requireJS docs, I really don't understand why you'd ever want the path mapping to be used for a directory. Does this mean it's possible to somehow load an entire directory's worth of files in one call? I don't get it.

Does anybody know if it's possible to just force require to stop adding .js to file paths so I don't have to hack around it?

thanks.

UPDATE: added some code samples as requested.

This is inside my HTML file (it's a Scala project so we can't write these variables directly into a .js file):

foo.js.modules = {

    order               : '@Static(javascripts/order.min.js)',

    reqwest             : 'http://5.foo.appspot.com/js/libs/reqwest',

    bean                : 'http://4.foo.appspot.com/js/libs/bean.min',

    detect              : 'order!http://4.foo.appspot.com/js/detect/detect.js',

    images              : 'order!http://4.foo.appspot.com/js/detect/images.js',

    basicTemplate       : '@Static(javascripts/libs/basicTemplate.min.js)',

    trailExpander       : '@Static(javascripts/libs/trailExpander.min.js)',

    fetchDiscussion     : '@Static(javascripts/libs/fetchDiscussion.min.js)'

    mostPopular         : '@Static(javascripts/libs/mostPopular.min.js)'

};

Then inside my main.js:

requirejs.config({

    paths: foo.js.modules

});



require([foo.js.modules.detect, foo.js.modules.images, bean], 

    function(detect, images, bean) {

        // do stuff

});

In the example above, I have to use the string bean (which refers to the require path) rather than my direct object (like the others use foo.js.modules.bar) otherwise I get the extra .js appended.

Hope this makes sense.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mireyag

Add To Favorites

Follow

Total Points: 73

Total Questions: 107

Total Answers: 85

Location: Ukraine

Member since Sun, Dec 13, 2020

3 Years ago

mireyag questions

1 Discord.js V13 sending message attachments

Sun, Aug 15, 21, 00:00, 3 Years ago

1 How to clear react-select values on button click without adding it to options?

Thu, Feb 18, 21, 00:00, 3 Years ago

1 React Js : no such file or directory, open Package.json

Wed, Dec 16, 20, 00:00, 3 Years ago

1 How to import util module in Node.js?

Tue, Sep 1, 20, 00:00, 4 Years ago

1 React Select Creatable no options instead of create

Sun, Jul 5, 20, 00:00, 4 Years ago

View All

answered 12 Years ago donovantyriqn · Accepted Answer

requirejs' noext plugin:

Load scripts without appending .js extension, useful for dynamic scripts...

Documentation

check the examples folder. All the info you probably need will be inside comments or on the example code itself.

Basic usage

Put the plugins inside the baseUrl folder (usually same folder as the main.js file) or create an alias to the plugin location:

require.config({

    paths : {

        //create alias to plugins (not needed if plugins are on the baseUrl)

        async: 'lib/require/async',

        font: 'lib/require/font',

        goog: 'lib/require/goog',

        image: 'lib/require/image',

        json: 'lib/require/json',

        noext: 'lib/require/noext',

        mdown: 'lib/require/mdown',

        propertyParser : 'lib/require/propertyParser',

        markdownConverter : 'lib/Markdown.Converter'

    }

});



//use plugins as if they were at baseUrl

define([

        'image!awsum.jpg',

        'json!data/foo.json',

        'noext!js/bar.php',

        'mdown!data/lorem_ipsum.md',

        'async!http://maps.google.com/maps/api/js?sensor=false',

        'goog!visualization,1,packages:[corechart,geochart]',

        'goog!search,1',

        'font!google,families:[Tangerine,Cantarell]'

    ], function(awsum, foo, bar, loremIpsum){

        //all dependencies are loaded (including gmaps and other google apis)

    }

);