Rework build process & add "module" to package.json.

.babelrc.js

@@ -1,22 +1,25 @@
 'use strict';
 
-const targets = process.env.IS_WEBPACK === "1" ? 
-  "> 0.25%, not dead" :
-  "maintained node versions"
+// If set, we put Babel in "esmMode", i.e. leave import/export intact.
+// Good for webpack and for an esm build.
+const esmMode = process.env.BABEL_MODULE_TYPE === "module";
+const es6Compat = process.env.BABEL_ES_COMPAT === "6";
 
 module.exports = {
   "presets": [
     [
       "@babel/preset-env",
       {
-        targets
-      }
+        // Don't transpile import/export in esmMode.
+        modules: esmMode ? false : "auto",
+        targets: es6Compat ? "maintained node versions" : undefined
+      },
     ],
     "@babel/react",
     "@babel/preset-flow"
   ],
   "plugins": [
-    "@babel/transform-flow-comments",
+    "@babel/plugin-transform-flow-comments",
     "@babel/plugin-proposal-class-properties",
   ],
   "env": {

.browserslistrc

@@ -0,0 +1,3 @@
+> 0.25%
+ie 11
+not dead

.gitignore

@@ -2,4 +2,3 @@
 *.iml
 node_modules/
 build/
-web/

.travis.yml

@@ -9,8 +9,9 @@ env:
 addons:
   firefox: latest
 script:
-  - npm run lint
-  - npm run test
+  - make lint
+  - make test
+  - make test-phantom
 email:
   on_failure: change
   on_success: never

Makefile

@@ -1,28 +1,41 @@
 # Mostly lifted from https://andreypopp.com/posts/2013-05-16-makefile-recipes-for-node-js.html
 # Thanks @andreypopp
 
+# Make it parallel
+MAKEFLAGS += j4
 export BIN := $(shell yarn bin)
-.PHONY: test dev lint build clean install link
+.PHONY: test dev lint build build-cjs build-esm build-web clean install link publish
 .DEFAULT_GOAL := build
 
 clean:
 	rm -rf build
+	mkdir -p build
 
 lint:
 	@$(BIN)/flow
 	@$(BIN)/eslint lib/* lib/utils/* specs/*
 	@$(BIN)/tsc -p typings
 
-build: clean
-	$(BIN)/babel --out-dir ./build ./lib
+build: build-cjs build-esm build-web
+
+build-cjs: $(BIN)
+	$(BIN)/babel --out-dir ./build/cjs ./lib
+
+build-esm: $(BIN)
+	env BABEL_MODULE_TYPE="module" BABEL_ES_COMPAT="6" $(BIN)/babel --out-dir ./build/module ./lib
+
+build-web: $(BIN)
 	$(BIN)/webpack --mode=production --display-modules
 
 # Allows usage of `make install`, `make link`
 install link:
 	@yarn $@
 
 test: $(BIN)
-	@NODE_ENV=test $(BIN)/karma start --single-run
+	@NODE_ENV=test $(BIN)/karma start
+
+test-phantom: $(BIN)
+	@NODE_ENV=test $(BIN)/karma start karma-phantomjs.conf.js
 
 dev: $(BIN) clean
 	DRAGGABLE_DEBUG=true $(BIN)/webpack-dev-server

example/example.js

@@ -1,4 +1,4 @@
-var Draggable = window.ReactDraggable;
+const {ReactDraggable: Draggable, React, ReactDOM} = window;
 
 class App extends React.Component {
   state = {

example/index.html

@@ -57,7 +57,7 @@
 <div id="container"></div>
 <script src="//unpkg.com/react@16/umd/react.development.js"></script>
 <script src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
-<script src="../web/react-draggable.js"></script>
+<script src="../build/web/react-draggable.min.js"></script>
 <!-- for imported script -->
 <script src="//unpkg.com/@babel/standalone/babel.min.js"></script>
 <script type="text/babel" src="../example/example.js"></script>

karma-phantomjs.conf.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const baseConfig = require('./karma.conf.js');
+// Phantom build can't handle the modern JS in the module build
+process.env.BABEL_MODULE_TYPE = 'cjs';
+
+module.exports = function(config) {
+  // Set base config options.
+  baseConfig(config);
+  // Then set some of our own, to run PhantomJS. It's a bit older, which is the idea.
+  // We want to make sure our CJS build still works on old environments.
+  config.set({
+    // Shim required for phantom
+    frameworks: ['phantomjs-shim', 'jasmine'],
+    browsers: ['PhantomJS_custom'],
+    // Includes Map/Set
+    files: [
+      'specs/draggable-phantom.spec.jsx'
+    ],
+    preprocessors: {
+      'specs/draggable-phantom.spec.jsx': ['webpack']
+    },
+    customLaunchers: {
+      PhantomJS_custom: {
+        base: 'PhantomJS',
+        options: {
+          viewportSize: {width: 1024, height: 768}
+        }
+      }
+    },
+  });
+};

karma.conf.js

@@ -1,6 +1,5 @@
 'use strict';
 
-const webpack = require('webpack');
 const _ = require('lodash');
 process.env.NODE_ENV = 'test';
 process.env.CHROME_BIN = require('puppeteer').executablePath();
@@ -10,25 +9,23 @@ module.exports = function(config) {
 
     basePath: '',
 
-    frameworks: ['phantomjs-shim', 'jasmine'],
+    frameworks: [ 'jasmine'],
 
     files: [
-      'specs/main.js'
+      'specs/draggable.spec.jsx'
     ],
 
     exclude: [
     ],
 
     preprocessors: {
-      'specs/main.js': ['webpack']
+      'specs/draggable.spec.jsx': ['webpack']
     },
 
     webpack: _.merge(
       require('./webpack.config.js')({}, {}),
       {
         mode: 'production',
-        // Remove minified build & separate compile of index-src
-        entry: '',
         // Remove source maps: *speeeeeed*
         devtool: 'none',
         module: {
@@ -60,16 +57,7 @@ module.exports = function(config) {
 
     autoWatch: false,
 
-    browsers: ['PhantomJS_custom', 'Firefox', 'ChromeHeadless'],
-
-    customLaunchers: {
-      PhantomJS_custom: {
-        base: 'PhantomJS',
-        options: {
-          viewportSize: {width: 1024, height: 768}
-        }
-      }
-    },
+    browsers: ['Firefox', 'ChromeHeadless'],
 
     singleRun: true,
   });

lib/Draggable.js

@@ -38,7 +38,7 @@ export type DraggableProps = {
 // Define <Draggable>
 //
 
-export default class Draggable extends React.Component<DraggableProps, DraggableState> {
+class Draggable extends React.Component<DraggableProps, DraggableState> {
 
   static displayName = 'Draggable';
 
@@ -383,3 +383,5 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
     );
   }
 }
+
+export {Draggable as default, DraggableCore};

index-src.js → lib/cjs.js

@@ -1,9 +1,8 @@
-var Draggable = require('./lib/Draggable').default;
+const {default: Draggable, DraggableCore} = require('./Draggable');
 
-// Previous versions of this lib exported <Draggable> as the root export. As to not break
-// them, or TypeScript, we export *both* as the root and as 'default'.
+// Previous versions of this lib exported <Draggable> as the root export. As to no-// them, or TypeScript, we export *both* as the root and as 'default'.
 // See https://github.com/mzabriskie/react-draggable/pull/254
 // and https://github.com/mzabriskie/react-draggable/issues/266
 module.exports = Draggable;
 module.exports.default = Draggable;
-module.exports.DraggableCore = require('./lib/DraggableCore').default;
+module.exports.DraggableCore = DraggableCore;

package.json

@@ -2,10 +2,12 @@
   "name": "react-draggable",
   "version": "4.0.3",
   "description": "React draggable component",
-  "main": "index.js",
-  "browser": "web/react-draggable.min.js",
+  "main": "build/cjs/cjs.js",
+  "browser": "build/web/react-draggable.min.js",
+  "module": "build/module/Draggable.js",
   "scripts": {
     "test": "make test",
+    "test-phantom": "make test-phantom",
     "test-debug": "karma start --browsers=Chrome",
     "test-ie": "karma start --browsers=IE",
     "dev": "make dev",

specs/draggable.spec.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-dom/test-utils';
 import ShallowRenderer from 'react-test-renderer/shallow';
-import Draggable, {DraggableCore} from '../index-src';
+import Draggable, {DraggableCore} from '../lib/Draggable';
 import FrameComponent from 'react-frame-component';
 import assert from 'power-assert';
 import _ from 'lodash';

webpack.config.js

@@ -2,28 +2,28 @@ const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 
-// Grabbed in .babelrc.js to switch on preset-env target.
-// If we're in webpack, we compile for browsers, otherwise we compile for modern Node.
-process.env.IS_WEBPACK = "1";
+// Grabbed in .babelrc.js to switch on transpiling modules.
+// We want webpack to handle modules if possible.
+// This can be overridden and webpack will handle babelified CJS.
+process.env.BABEL_MODULE_TYPE = process.env.BABEL_MODULE_TYPE || 'module';
 
 module.exports = (env, argv) => ({
 	entry: {
-    "react-draggable": "./index-src.js",
-    "react-draggable.min": "./index-src.js",
+    'react-draggable.min': './lib/cjs.js',
   },
 	output: {
     filename: '[name].js',
     sourceMapFilename: '[name].js.map',
     devtoolModuleFilenameTemplate: '../[resource-path]',
     library: 'ReactDraggable',
     libraryTarget: 'umd',
-    path: path.resolve(__dirname, 'web'),
+    path: path.resolve(__dirname, 'build', 'web'),
 	},
   devServer: {
     contentBase: '.',
     hot: true,
     open: true,
-    openPage: '/example/index.html',
+    openPage: 'example/index.html',
     writeToDisk: true,
   },
   devtool: 'source-map',