Browserify: Use module.exports if required, otherwise expose global

javascript browserify
Bryan Head picture Bryan Head · Apr 23, 2013 · Viewed 30.6k times · Source

I'm considering adopting browserify for some of my projects, but would like to make sure that others don't have to use browserify if they want to use the (bundled) code. The obvious way to do this is to both expose the modules exports through module.exports as well as through a window. global. However, I'd rather not pollute the global namespace for those who are requireing the script.

Is it possible to detect if a script is being required? If it is, then I could do something like:

var mymodule = (function() { ... })();
if (isRequired()) {
  module.exports = mymodule;
} else {
  window.mymodule = mymodule;
}

Note that no matter what, this will be bundled beforehand, so the var mymodule won't be exposing a global. Also, currently I'm using the revealing module pattern, but would be willing to switch to something more appropriate for browserify.

What's the best way to make a module both requireable and <script src=able? Is it best to just expose a global in both circumstances?

Answer

karellm picture karellm · Jan 19, 2014

There is a good article from Forbes Lindesay explaining how to do standalone builds: http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

The short version, use the standalone option:

browserify beep.js --standalone beep-boop > bundle.js

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