Using AMI as a module (in webpack) no longer works.

Description

#110 ensured that AMI was build as a CJS module by babel before being published to NPM. This ensured that an import properly resolved all dependencies as well.

#195 Migrated to Webpack which removed this from the build system.

Currently AMI only outputs a browser ready bundle which requires a global THREE variable to be present. When using Webpack to bundle the application this means that ThreeJS is not automatically added as dependency and a shim is required. It would be great if we could reinstate the changes made in #110 that were removed in #195 so that THREE is properly imported and detected by webpack.

Live Demo

I do not currently have a live demo of this unfortunately.

Steps to Reproduce

1. Set up a basic webpack project (Webpack 4 with no configuration should work).
2. In your main source file use `import * as AMI from ‘ami.js’
3. Call new AMI.OrthographicCamera

Note that with the build steps that were introduced in #110 I believe there was no need to use import * as.

Expected Results

The code works without errors.

Actual Results

The console shows an error “THREE not defined”.

Browsers Affected

• All
• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• AMI: v0.0.22
• THREEJS: v0.94.0

[Kingdutch]

Aah I see : )

Is there a way to add ‘next’ as a dist-tag? Currently I can only install 0.0.22 through Yarn (which doesn’t have the factories yet) and I can’t say yarn add ami.js@next because Yarn has no knowledge of the dev or 0.0.23-dev version.

I can install from the git repo itself but that’s a lot slower and more cumbersome to keep up to date 😃

[NicolasRannou]

@Kingdutch, you should now use the factories to use AMI in you Qebpack project (I currently use AMI in an application based on create-react-app).

import * as THREE from 'three';
import {stackHelperFactory} from 'ami.js';

const StackHelper = stackHelperFactory(THREE);
const sh = StackHelper();