RequireJS 配置与不支持 AMD 的模块

Question

So I'm trying to read the Require JS API -documentation to figure out how this should be done properly, but I've been unable to load a library so it doesn't get defined as undefined. I'm using this through NPM-WebJars, though I guess it shouldn't matter how you define it.

Basically, I'm trying to get use of the react-bootstrap-switch -library working in my project. Here's JavaScript-file source in Pastebin as it might change in the master-branch. react-bootstrap-switch defines the library with exports.default = Switch. I have several other modules defined using RequireJS, which have AMD-support and are working.

Here is how I'm using RequireJS

requirejs.config("paths":{"react-bootstrap-switch":["@routes.WebJarAssets.at("react-bootstrap-switch/15.0.0/dist/js/index")"]}}); // the file location

using the library

define(['react', 'react-bootstrap-switch'], function(React, Switch){
     console.log(Switch); // <- undefined
} 

So with just standard requirejs.config -import it doesn't work, because lack of AMD support. So I guess I should use shim, but how do I do that? I've been reading into it a bit, but I fail to properly import the library using it. It probably should be something pretty easy, but it doesn't seem to be working. For instance

 requirejs.config({
             "paths":{"react-bootstrap-switch":["@routes.WebJarAssets.at("react-bootstrap-switch/15.0.0/dist/js/index")"]},
             "shim": {
                     "react-bootstrap-switch": {
                          exports: 'Switch'
                      }}});

leaves it undefined. I've been trying to get in the between with init-functions, but I can't locate the correct namespace inside the window. Also tried to switch the order of shimming before the paths, trying 'default' instead of 'Switch', and some other tricks, but it just doesn't seem to import it properly as it gets stuck to undefined.

Last thing I could try to is to get the code locally and change to something else instead of exports.default or just code my own function for that, but I would like to get this working for future reference.

Answer 1

It is clear what you are trying to load is a file that was transpiled and had for target a CommonJS environment. Such files cannot be loaded as-is by RequireJS.

You'll have at a minimum to wrap its code in define(function (require, exports, module) { at the start, and }); at the end. Once you do that, it may work. You can use r.js to do the wrapping, or any other tool.