lokesh · lokesh · Jul 15, 2019 · Jul 14, 2019 · Jul 15, 2019
diff --git a/README.md b/README.md
@@ -4,9 +4,15 @@ A script for grabbing the color palette from an image. Uses Javascript and the c
 
 [See a Demo](http://lokeshdhakar.com/projects/color-thief) | [Read more on my blog](http://lokeshdhakar.com/color-thief)
 
-
 ## How to use
 
+### Import
+
+- `/dist/color-thief.umd.js`: UMD module. For simple script tag loading that exposes a global variable or for RequireJS AMD support.
+- `/dist/color-thief.js`: CommonJS module. Entry point for Node.js and Browserify.
+- `/dist/color-thief.mjs`: ES6 module. For modern browsers as well as Webpack and Rollup.
+- `/dist/color-thief.min.js`: Duplicate of `/dist/color-thief.umd.js`. Kept around to maintain backwards compatibility.
+
 ### Get the dominant color from an image
 
 ```js

diff --git a/build/build.js b/build/build.js
@@ -1,20 +1,23 @@
-const minify = require('@node-minify/core');
-const uglify = require('@node-minify/uglify-es');
+var fs = require('fs');
+const { resolve } = require('path');
 
-minify({
-  compressor: uglify,
-  input: './src/color-thief.js',
-  output: './dist/color-thief.min.js',
-  options: {
-    output: {
-        comments: 'some'
-    }
-  },
-  callback: function(err, min) {
-    if (err) {
-        console.log('⚠️ERROR:' + err);
-    } else {
-        console.log('✅ Minification completed');
-    }
-  }
+/*
+color-thief.umd.js duplicated as color-thief.min.js for legacy support
+
+In Color Thief v2.1 <= there was one distribution file (dist/color-thief.min.js)
+and it exposed a global variable ColorThief. Starting from v2.2, the package
+includes multiple dist files for the various module systems. One of these is
+the UMD format which falls back to a global variable if the requirejs AMD format
+is not being used. This file is called color-thief.umd.js in the dist folder. We
+want to keep supporting the previous users who were loading
+dist/color-thief.min.js and expecting a global var. For this reason we're
+duplicating the UMD compatible file and giving it that name.
+*/
+
+const source = resolve(process.cwd(), 'dist/color-thief.umd.js');
+const dest = resolve(process.cwd(), 'dist/color-thief.min.js');
+
+fs.copyFile(source, dest, (err) => {
+    if (err) throw err;
+    console.log('source.txt was copied to destination.txt');
 });
diff --git a/cypress/integration/api_spec.js b/cypress/integration/api_spec.js
@@ -9,7 +9,7 @@ function rgbCount(text) {
 }
 
 describe('getColor()', function() {
-	beforeEach(function() {
+	before(function() {
         cy.visit('http://localhost:8080/cypress/test-pages/index.html');
     })
 

diff --git a/cypress/integration/module_spec.js b/cypress/integration/module_spec.js
@@ -0,0 +1,9 @@
+describe('es6 module', function() {
+    it('loads', function() {
+        cy.visit('http://localhost:8080/cypress/test-pages/es6-module.html');
+        cy.get('#result').should(($el) => {
+            const count = $el.text().split(',').length
+            expect(count).to.equal(3);
+        });
+    })
+});
diff --git a/cypress/test-pages/es6-module.html b/cypress/test-pages/es6-module.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<title>Color Thief</title>
+    <link rel="stylesheet" href="./screen.css">
+</head>
+<body>
+
+    <img src="./img/rainbow-horizontal.png" />
+
+    <div id="result"></div>
+
+    <script type="module">
+        import ColorThief from '../../dist/color-thief.mjs';
+
+        const colorThief = new ColorThief();
+
+
+        const img = document.querySelector('img');
+
+        function getColorFromImage(img) {
+            const result = colorThief.getColor(img);
+            document.querySelector('#result').innerText = result;
+        }
+
+        if (img.complete) {
+            getColorFromImage(img);
+        } else {
+            image.addEventListener('load', function() {
+                getColorFromImage(img);
+            });
+        }
+    </script>
+
+
+</body>
+</html>
diff --git a/cypress/test-pages/index.html b/cypress/test-pages/index.html
@@ -49,7 +49,7 @@ <h3>getPalette(img, {{count}})</h3>
     </script>
 
 
-    <script src="/src/color-thief.js"></script>
+    <script src="/dist/color-thief.umd.js"></script>
     <script src="/node_modules/mustache/mustache.js"></script>
     <script src="index.js"></script>
 

diff --git a/cypress/test-pages/index.js b/cypress/test-pages/index.js
@@ -1,5 +1,6 @@
 var colorThief = new ColorThief();
 
+
 var images = [
     'black.png',
     'red.png',

diff --git a/dist/color-thief.js b/dist/color-thief.js
diff --git a/dist/color-thief.js.map b/dist/color-thief.js.map