Webpack: create global variable

Question

I want to be able to execute this line of code from deep within my program (compiled native code in Elm in practise)

var codec = msgpack.createCodec();

Before trying to switch to Webpack I simply had a script tag pointing to msgpack-lite. Would that still work, and if so, where should I put the .min.js file so that it can be found.

I've also tried putting it in index.js

var msgpack = require("msgpack-lite");
var Elm = require('./Main');
var elm = Elm.Main.fullscreen()

But it could not find it. And following Define global variable with webpack I tried this in webpack.config.js

  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.elm', '.scss'],
    alias: {
      'msgpack': require('msgpack-lite')
    }

  },

  module: {
    loaders: [
      {
        test: /\.html$/,
        exclude: /node_modules/,
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader: 'elm-hot!elm-webpack'
        // loader: 'elm-hot!elm-webpack?cwd=' + elmSource
    },
    {
        test: /\.scss$/,
        exclude: [/elm-stuff/, /node_modules/],
        loaders: ["style-loader", "css-loader", "sass-loader"]
      }
    ],

    noParse: /\.elm$/
  },
  plugins: [
     new webpack.ProvidePlugin({
       'msgpack': 'msgpack'
     })
 ],

but again with no success

Is the `msgpack-lite` a proper module, i.e. does it export something, or does it just hook on the `window` object? — Dimitris Karagiannis, Jan 20 '17 at 12:57
It certainly works with `require` https://github.com/kawanet/msgpack-lite — Simon H, Jan 20 '17 at 20:35

score 3 · Accepted Answer · answered Jan 20 '17 at 12:53

3

To set a global variable from inside a module (e.g. index.js), you can add it directly to the window object. Otherwise, the variable will only live in the context of the module.

window.msgpack = require("msgpack-lite");

I think there is another solution where you require("msgpack-lite") inside your native Elm module. This way, you don't need a global variable but instead you have another compilation step for your native Elm module.

answered Jan 20 '17 at 12:53

sabine

301
3
5

I'm using axios lib which looks for global["product"]["navigator"]. I define the variable as such but I keep getting navigator is undefined. Is there a fix for that? – itaintme Aug 28 '18 at 17:23

Webpack: create global variable

1 Answers1