CODEWITHSUNDEEP
javascriptnode.jswebpackbabeljsweb-component
Bruno Soares
Bruno Soares

Reputation: 291

Using a NPM module with global variables in webpack

I'm trying to use the exif-js in a webpack+babeljs project. This library (exif-js) creates a global variable "EXIF", but I can't access it in Chrome devtools neither in my js script.

I tried to use webpack provide-plugin to make "EXIF" visible in all pages, but it is not working.

plugins: [
    new webpack.ProvidePlugin({
      EXIF: 'exif-js/exif.js'
    })
]

What is the best way to use this library in a webpack project?

Thanks!

Upvotes: 0

Views: 1055

Answers (1)

rossipedia
rossipedia

Reputation: 59397

It looks like in CommonJS, it exports the EXIF var instead of attaching it to the global scope.

Which means with webpack you can just import it like any other module:

var exif = require('exif-js');

To demonstrate, see this webpackbin

If you actually do need it in global scope, you can manually attach it to the window object after importing it:

var exif = require('exif-js');
window.EXIF = exif;

To answer the actual title of the question regarding using scripts that set global variables, you can usually either use ProvidePlugin as you demonstrated, or you can use externals:

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment. This feature is typically most useful to library developers, however there are a variety of applications for it.

For example (in your webpack.config.js):

externals: {
    jquery: 'jQuery'
}

However, this works differently than ProvidePlugin. Whereas ProvidePlugin resolves undeclared variables that are assumed to be global, externals resolves specific module names to global variables that are assumed to exist (eg: require('jquery') would resolve to window.$).

Upvotes: 4

Related Questions