fix(build): properly include build/ in published package

refactor webpack, babel & karma config

Fixes #425, #426

.babelrc → .babelrc.js

@@ -1,9 +1,15 @@
-{
+'use strict';
+
+const targets = process.env.IS_WEBPACK === "1" ? 
+  "> 0.25%, not dead" :
+  "maintained node versions"
+
+module.exports = {
   "presets": [
     [
       "@babel/preset-env",
       {
-        "modules": false
+        targets
       }
     ],
     "@babel/react",

karma.conf.js

@@ -1,4 +1,7 @@
-var webpack = require('webpack');
+'use strict';
+
+const webpack = require('webpack');
+const _ = require('lodash');
 process.env.NODE_ENV = 'test';
 process.env.CHROME_BIN = require('puppeteer').executablePath();
 
@@ -20,30 +23,21 @@ module.exports = function(config) {
       'specs/main.js': ['webpack']
     },
 
-    webpack: {
-      mode: 'production',
-      module: {
-        // Suppress power-assert warning
-        exprContextCritical: false,
-        rules: [
-          {
-            test: /\.(?:js|es).?$/,
-            loader: 'babel-loader?cacheDirectory',
-            exclude: /(node_modules)/
-          }
-        ]
-      },
-      plugins: [
-        new webpack.DefinePlugin({
-          'process.env': {
-            NODE_ENV: '"test"'
-          }
-        })
-      ],
-      performance: {
-        hints: false
-      } 
-    },
+    webpack: _.merge(
+      require('./webpack.config.js')({}, {}),
+      {
+        mode: 'production',
+        module: {
+          // Suppress power-assert warning
+          exprContextCritical: false,
+        },
+        performance: {
+          hints: false,
+        },
+        // zero out externals; we want to bundle React
+        externals: '',
+      }
+    ),
 
     webpackServer: {
       stats: {

package.json

@@ -3,7 +3,7 @@
   "version": "4.0.1",
   "description": "React draggable component",
   "main": "index.js",
-  "browser": "web/react-draggable.js",
+  "browser": "web/react-draggable.min.js",
   "scripts": {
     "test": "make test",
     "test-debug": "karma start --browsers=Chrome",
@@ -14,7 +14,8 @@
     "flow": "flow"
   },
   "files": [
-    "/lib"
+    "/build",
+    "/web/react-draggable.min.js"
   ],
   "typings": "./typings/index.d.ts",
   "types": "./typings/index.d.ts",

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-babel';
+import Draggable, {DraggableCore} from '../index-src';
 import FrameComponent from 'react-frame-component';
 import assert from 'power-assert';
 import _ from 'lodash';

webpack.config.js

@@ -2,10 +2,14 @@ const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 
-module.exports = {
+// 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";
+
+module.exports = (env, argv) => ({
 	entry: {
-    "react-draggable": "./index.js",
-    "react-draggable.min": "./index.js",
+    "react-draggable": "./index-src.js",
+    "react-draggable.min": "./index-src.js",
   },
 	output: {
     filename: '[name].js',
@@ -42,16 +46,21 @@ module.exports = {
 		rules: [
 			{
         test: /\.(?:js|es).?$/,
-        loader: 'babel-loader?cacheDirectory',
+        loader: 'babel-loader',
+        options: {
+          cacheDirectory: true,
+        },
         exclude: /(node_modules)/
       }
 		]
 	},
   plugins: [
     new webpack.EnvironmentPlugin({
       // Default values
-      DRAGGABLE_DEBUG: false,
-      NODE_ENV: 'production'
+      DRAGGABLE_DEBUG: argv.mode === 'development',
+      NODE_ENV: ['development', 'production'].includes(argv.mode) ? 
+        argv.mode : 
+        (process.env.NODE_ENV || 'production'),
     }),
     // Scope hoisting
     new webpack.optimize.ModuleConcatenationPlugin(),
@@ -60,8 +69,7 @@ module.exports = {
     minimizer: [new TerserPlugin({
       include: /\.min\.js$/,
       sourceMap: true,
-      terserOptions: {
-      }
+      terserOptions: {}
     })],
   }
-};
+});