Defining global variable for Browserify

browserify spine.js
sebastiannm picture sebastiannm · May 5, 2014 · Viewed 28.6k times · Source

I'm using SpineJS (which exports a commonjs module) and it needs to be available globally because I use it everywhere, but It seems like I have to do Spine = require('spine') on every file that uses Spine for things to work.

Is there any way to define Spine once to make it globally available?

PS: I'm using Spine as an example, but I'm in general wondering about how to do this with any other library.

Answer

David Bonnet picture David Bonnet · May 6, 2014

Writing Spine = require('spine') in each file is the right way to do.

Yet, there are several possibilities by using the global or window object (browserify sets the global object to window, which is the global namespace):

  • in spine.js: global.Spine = module.exports
  • in any other .js file bundled by browserify: global.Spine = require('spine')
  • in a script tag or an .js file referenced by the .html file, after the spine.js file: window.Spine = require('spine')

Related questions

How to import jquery using ES6 syntax?

I'm writing a new app using (JavaScript) ES6 syntax through babel transpiler and the preset-es2015 plugins, as well as semantic-ui for the style. index.js import * as stylesheet from '../assets/styles/app.scss'; import * as jquery2 from '../dist/…

Read More
Is there a way to render multiple React components in the React.render() function?

For example could I do: import React from 'react'; import PanelA from './panelA.jsx'; import PanelB from './panelB.jsx'; React.render( <PanelA /> <PanelB />, document.body ); where React would render: body PanelA PanelB Currently I'm …

Read More
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Gulp

Consider the following two files: app.js import Game from './game/game'; import React from 'react'; import ReactDOM from 'react-dom'; export default (absPath) => { let gameElement = document.getElementById("container"); if (gameElement !== null) { ReactDOM.render( <Game mainPath={absPath} />, …

Read More