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!
- 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.
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.
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.
$ npm install shim-loader --save-dev
Install shim-loader via npm and add the loader to your webpack config.
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'),
}
]
},
};MIT