Can I use an ES6/2015 module import to set a reference in 'global' scope?
Shimming modules is the way to go: http://webpack.github.io/docs/shimming-modules.html
I quote from the page:
plugin ProvidePlugin
This plugin makes a module available as variable in every module. The module is required only if you use the variable.
Example: Make $ and jQuery available in every module without writing require("jquery")
.
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery"})
To use this with your webpack-config just add this object to an array called plugins in the config:
// the plugins we want to use var plugins = [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" })];// this is your webpack-configmodule.exports = { entry: ..., output: ..., module: ..., plugins: plugins}
For es6/2015 I done the following.
import {jsdom} from 'jsdom';import jQuery from 'jquery';var window = jsdom(undefined, {}).defaultView;var $ = jQuery(window);//window.jQuery = $; //probably not needed but it's there if something wrong//window.$ = $;//probably not needed but it's there if something wrong
Then you can use it as normal
var text = $('<div />').text('hello world!!!').text();console.log(text);
Hope this helps.
Importing jQuery
into your module does not make it available for 'troublesome'
. Instead, you could create a thin wrapper module for 'troublesome'
that provides jQuery
and any other required "globals".
troublesome-module.js:
// Bring jQuery into scope for troublesome.import jQuery from 'jquery';// Import any other 'troublesome'-assumed globals.// Paste or have build tool interpolate existing troublesome.js code here.
Then in your code you should be able to
import 'troublesome-module';