Rework build process & add "module" to package.json. (#441)

* fix(build): add module build

This allows us to export a cjs build that is more ES5-like
to avoid issues with JSDOM, PhantomJS, etc.

* test(phantom): separate out phantom test to use cjs build opts

This ensures we're testing both build types

* refactor(build): remove index.js mess, rename to cjs.js

Finishes refactor. Dev, test, lint, and build all working.

* fix(build): separate module options & es6 compat

Author: STRML

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

index.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-phantomjs.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,
   });