Can I use an ES6/2015 module import to set a reference in 'global' scope? Can I use an ES6/2015 module import to set a reference in 'global' scope? javascript javascript

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';