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
THREE
exists 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.