This isn't bullet-proof but here's how I've doing things lately:
npm install three --save- Include this in your browserify/webpack root script, typically your
index.js:
global.THREE = require('three')- Add the
"THREE"global to your linter (e.g. semistandard/eslintrc) - For the rest of your script(s), code per usual by just assuming
THREEexists in window/global scope.
global.THREE = require('three');
require('./other.js');
console.log(new THREE.Vector());If I need to customize ThreeJS (which is very often in production) then I will simply replace require('three') with require('./lib/vendor/three.js').
As bad as it sounds, I might just copy the ThreeJS file and replace THREE.Foo = function() with function Foo (), then add module.exports = Foo at the bottom. This maybe takes 1-2 minutes and tends to be less painful than dealing with build tool junk.
Sometimes you need a whole bunch of extensions/examples. Instead of converting them all I pretty much give up and just go the standard script-tag way.
To KISS I just end up removing the require('three') from my index, copying node_modules/three/build/three.js to a vendor folder, npm uninstall three --save to remove from package.json, and adding some script tags in HTML:
<body>
...
<script src="js/vendor/three.js.js"></script>
<script src="js/vendor/some-three-extension.js"></script>
<script src="js/bundle.js"></script>
...
</body>My project's codebase doesn't change since it already assumes THREE is in global scope.