shim-loader

shim-loader makes traditional/legacy "browser globals" scripts compatible with webpack's module system. Based on the idea of RequireJS and browserify-shim.

Shimming in webpack is already possible with complicated configurations. Now it's easy!

Features

• Shims non-CommonJS modules by specifying an alias and the identifier under which the module attaches itself to the global window object. Optionally you can specify the path to the module.
• set up code relationships when libraries depends on other libraries being in the global namespace.
• Makes define and also module be undefined, in order to fix improperly-authored libraries that need shimming but try anyway to use AMD or CommonJS.

When should I use this?

You should use this only when you have to use libraries that are incompatible with your desired module definition style or when you want to upgrade a legacy project to the present.

How does it work?

shim-loader is a webpack loader that transforms the code in a way that it works in the webpack environment. It's nearly the same as doing this manually with imports-loader and exports-loader.

Installation

 
$ npm install shim-loader --save-dev
 

Install shim-loader via npm and add the loader to your webpack config.

Configuration

webpack.config.js

 
var path = require('path');
 
var webpackShimConfig = {
  // Remember: Only use shim config for incompatible libraries
  // the libraries below are just examples, regardless whether they are compatible or not
  shim: {
    'jquery': {
      exports: 'jQuery' // Once loaded, use the global 'jQuery' as the module value.
    },
    'underscore': {
      exports: '_' // Once loaded, use the global '_' as the module value.
    },
    'backbone': {
      exports: 'Backbone' // Once loaded, use the global 'Backbone' as the module value.
      deps: [
        'underscore', // just make sure that underscore is loaded before (uses it's global value)
        'jquery:$', // Provide jquery as dependency with name $
      ]
    },
    'jquery.ui.core': {
      deps: [
        'jquery:jQuery', // Provide jquery as dependency with name jQuery
      ]
    },
    'jquery.ui.datepicker': {
      deps: [
        'jquery:jQuery', // Provide jquery as dependency with name jQuery
        'jquery.ui.core', // just make sure that jquery.ui.core is loaded before
      ]
    },
    'math': {
      // multiple export values are also possible,
      // they are returned as single object with the associated key for each value
      // e.g. module.exports = { add: function(){}, subtract: function(){} };
      exports: [
        'add', // exports add from global namespace as module value
        'subtract',  // exports subtract from global namespace as module value
      ]
    },
    // absolute paths are also possible
    [path.join(__dirname, 'bower_components/jquery-ui/ui/datepicker.js')]: {
      deps: [
          'jquery:jQuery', // Provide jquery as dependency with name jQuery
          'jquery.ui.core', // just make sure that jquery.ui.core is loaded before
        ]
    }
  },
  'masonry': {
      amd: false // disable AMD module style
      commonjs: true // and use CommonJS module style instead
  }
};
 
module.exports = {
  entry: './src/app.js',
  output: {
    path: './dist',
    filename: 'bundle.js',
  },
  resolve: {
    alias: {
      'jquery': path.join(__dirname, 'bower_components/jquery/dist/jquery.js'),
      'underscore': path.join(__dirname, 'bower_components/lodash/dist/lodash.underscore.js'),
      'backbone': path.join(__dirname, 'bower_components/backbone/backbone.js'),
      'jquery.ui.core': path.join(__dirname, 'bower_components/jquery-ui/ui/core.js'),
      'jquery.ui.datepicker': path.join(__dirname, 'bower_components/jquery-ui/ui/datepicker.js'),
    },
  },
  module: {
    loaders: [
      {
        // apply the loader to setup module shimming
        test: /\.js/
        loader: 'shim-loader',
        query: webpackShimConfig,
        // pass a list of directories or files to improve performance
        includes:  path.join(__dirname, 'bower_components'),
      }
    ]
  },
};
 

License

MIT