Add module build (#492)

jimp-dev · Jul 30, 2018 · 7c608e8 · 7c608e8
1 parent f19e77f
commit 7c608e8
Show file tree

Hide file tree

Showing 10 changed files with 999 additions and 1,057 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -0,0 +1,31 @@
+module.exports = api => {
+    api.cache(true);
+
+    return {
+        presets: ['@babel/env'],
+
+        plugins: [
+            '@babel/proposal-class-properties',
+            '@babel/syntax-object-rest-spread',
+            process.env.BABEL_ENV !== 'module' && 'add-module-exports',
+            [
+                'transform-inline-environment-variables',
+                { include: ['BABEL_ENV', 'ENV'] }
+            ]
+        ].filter(Boolean),
+
+        env: {
+            test: {
+                plugins: ['istanbul']
+            },
+            development: {
+                plugins: [
+                    process.env.ENV !== 'browser' && 'source-map-support'
+                ].filter(Boolean)
+            },
+            module: {
+                presets: [['@babel/env', { modules: false }]]
+            }
+        }
+    };
+};
diff --git a/.gitignore b/.gitignore
@@ -41,5 +41,9 @@ node_modules
 
 package-lock.json
 
+# Browser Version
 browser/lib/*.js
+# ES5 Version
 dist/
+# ESM Version
+es/
diff --git a/README.md b/README.md
@@ -38,6 +38,29 @@ Jimp.read('lenna.png')
     });
 ```
 
+## Module Build
+
+If you're using a web bundles (webpack, rollup, parcel) you can benefit from using the `module` build of jimp. Using the module build will allow your bundler to understand your code better and exclude things you aren't using.
+
+```js
+import Jimp from 'jimp/es';
+```
+
+### WebPack
+
+If you're using webpack you can set `process.browser` to true and your build of jimp will exclude certain parts, making it load faster.
+
+```js
+{
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.browser': 'true'
+    }),
+    ...
+  ],
+}
+```
+
 ## Basic usage
 
 The static `Jimp.read` method takes the path to a PNG, JPEG or BMP file and returns a Promise:

diff --git a/karma.conf.js b/karma.conf.js
@@ -1,25 +1,28 @@
 // Karma configuration
 // Generated on Sat Jan 28 2017 19:40:10 GMT-0300 (BRT)
 
-const builder = require('./tools/browser-build.js');
-
 module.exports = function(config) {
     config.set({
         browserDisconnectTimeout: 25000,
         browserNoActivityTimeout: 25000,
 
-        // base path that will be used to resolve all patterns (eg. files, exclude)
-        basePath: '',
-
         // frameworks to use
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
+        frameworks: ['browserify', 'mocha'],
+
+        browserify: {
+            debug: true,
+            transform: ['babelify']
+        },
+
+        preprocessors: {
+            '*': 'browserify',
+            '*/*': 'browserify'
+        },
 
         // list of files / patterns to load in the browser
         files: [
-            '*.js',
-            process.env.TEST || 'test/*.test.js',
-            'test/test-helper.js',
+            'test/*.js',
             {
                 pattern: 'test/samples/**/*',
                 watched: false,
@@ -34,83 +37,14 @@ module.exports = function(config) {
             }
         ],
 
-        // list of files to exclude
-        exclude: [],
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            '*': 'generic',
-            '*/*': 'generic'
-        },
-
-        genericPreprocessor: {
-            rules: [
-                {
-                    // Default generic processor
-                    process(content, file, done, log) {
-                        log.debug(
-                            'File ' +
-                                file.path +
-                                ' should be in another bundle.'
-                        );
-                        done(
-                            '/* File ' +
-                                file.path +
-                                ' should be in another bundle */'
-                        );
-                    }
-                },
-                {
-                    match: 'index.js',
-                    process(content, file, done, log) {
-                        log.debug('Bundle Jimp.');
-                        builder.bundleSimple(file.path, {}, done);
-                    }
-                },
-                {
-                    match: 'test/*.test.js',
-                    process(content, file, done, log) {
-                        log.debug('Bundle Test ' + file.path + '.');
-                        builder.bundleSimple(
-                            file.path,
-                            { exclude: ['index.js'] },
-                            done
-                        );
-                    }
-                }
-            ]
-        },
-
-        // test results reporter to use
-        // possible values: "dots", "progress"
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['mocha-own'],
-        // mochaOwnReporter: { reporter: "nyan" },
-
-        // web server port
-        port: 9876,
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
         // level of logging
         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
         logLevel: config.LOG_INFO,
 
-        // enable / disable watching file and executing tests whenever any file changes
-        autoWatch: true,
-
         // start these browsers
         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
         browsers: ['Firefox', 'Chrome'],
 
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        singleRun: false,
-
-        // Concurrency level
-        // how many browser should be started simultaneous
-        concurrency: Infinity
+        reporters: ['mocha']
     });
 };
diff --git a/package.json b/package.json
@@ -2,10 +2,15 @@
   "name": "jimp",
   "version": "0.3.0",
   "description": "An image processing library written entirely in JavaScript (i.e. zero external or native dependencies).",
-  "main": "./dist/jimp.js",
+  "main": "./dist/main/jimp.js",
+  "browser": "./browser/lib/jimp.js",
   "types": "./jimp.d.ts",
   "tonicExampleFilename": "example.js",
-  "browser": "./browser/lib/jimp.js",
+  "files": [
+    "browser",
+    "dist",
+    "es"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/oliver-moran/jimp.git"
@@ -18,23 +23,21 @@
     "lint:src": "xo src/*.js src/**/*.js !src/modules/*.js",
     "lint:tests": "xo test/*.js --global before",
     "lint:extra": "xo {tools,examples}/*.js",
-    "test:karma": "CHROME_BIN=\"$(which chrome || which chromium)\" karma",
-    "test:browser:run": "npm run -s test:karma run",
-    "test:browser:once": "npm run -s test:karma start -- --single-run",
-    "test:browser:watch": "npm run -s test:karma start -- --auto-watch",
-    "test:node:run": "BABEL_ENV=test mocha --require babel-register",
-    "test:node:once": "nyc npm run test:node:run",
-    "test:node:watch": "mocha --reporter min --watch ./test/*.test.js",
-    "test": "npm run -s test:node:once && npm run -s test:browser:once",
-    "test:old": "./test/tests.sh",
+    "test:browser": "BABEL_ENV=test ENV=browser CHROME_BIN=\"$(which chrome || which chromium)\" karma start --single-run",
+    "test:browser:watch": "npm run -s test:browser start -- --auto-watch",
+    "test:node": "BABEL_ENV=test mocha --require @babel/register",
+    "test:node:watch": "npm run test:node -- --reporter min --watch",
+    "test:node:coverage": "nyc npm run test:node",
+    "test": "npm run -s test:node:coverage && npm run -s test:browser",
     "browser-build": "node tools/browser-build.js test",
-    "build": "npm run build:browser && npm run build:node:production",
+    "build": "npm run build:browser && npm run build:node:production && npm run build:module",
     "build:debug": "npm run build:browser:debug && npm run build:node:debug",
-    "build:node": "babel src -d dist --source-maps",
+    "build:module": "BABEL_ENV=module babel src -d es --source-maps",
+    "build:node": "babel src -d dist/main --source-maps",
     "build:node:debug": "BABEL_ENV=development npm run build:node",
     "build:node:production": "BABEL_ENV=production npm run build:node",
     "build:browser": "BABEL_ENV=production node tools/browser-build.js prepublish",
-    "build:browser:debug": "BABEL_ENV=development node tools/browser-build.js prepublish"
+    "build:browser:debug": "BABEL_ENV=development ENV=browser node tools/browser-build.js prepublish"
   },
   "keywords": [
     "image",
@@ -67,26 +70,29 @@
     "utif": "^2.0.0"
   },
   "devDependencies": {
-    "babel": "6.23.0",
-    "babel-cli": "6.26.0",
-    "babel-core": "^6.26.3",
+    "@babel/cli": "^7.0.0-beta.54",
+    "@babel/core": "^7.0.0-beta.54",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.54",
+    "@babel/plugin-syntax-object-rest-spread": "^7.0.0-beta.54",
+    "@babel/preset-env": "^7.0.0-beta.54",
+    "@babel/register": "^7.0.0-beta.54",
     "babel-eslint": "^8.2.6",
     "babel-plugin-add-module-exports": "^0.3.2",
     "babel-plugin-istanbul": "^4.1.6",
+    "babel-plugin-source-map-support": "^2.0.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-0": "6.24.1",
-    "babelify": "^8.0.0",
+    "babelify": "^9.0.0",
     "browserify": "^16.2.2",
     "envify": "^4.1.0",
     "express": "^4.16.3",
     "husky": "^1.0.0-rc.13",
     "karma": "^2.0.5",
+    "karma-browserify": "^5.3.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-generic-preprocessor": "^1.1.0",
     "karma-mocha": "^1.3.0",
-    "karma-mocha-own-reporter": "^1.1.2",
+    "karma-mocha-reporter": "^2.2.5",
     "lint-staged": "^7.2.0",
     "mocha": "^5.2.0",
     "nyc": "^12.0.2",
@@ -148,47 +154,15 @@
         6
       ]
     },
-		"overrides": [
-			{
-				"files": "**/test/*.js",
+    "overrides": [
+      {
+        "files": "**/test/*.js",
         "esnext": false,
         "rules": {
           "max-nested-callbacks": 0
         }
-			}
-		]
-  },
-  "babel": {
-    "presets": [
-      [
-        "env",
-        {
-          "targets": {
-            "ie": 8
-          },
-          "useBuiltIns": true
-        }
-      ],
-      "stage-0"
-    ],
-    "plugins": [
-      "add-module-exports",
-      [
-        "transform-inline-environment-variables",
-        { "include": [ "BABEL_ENV" ] }
-      ]
-    ],
-    "env": {
-      "test": {
-        "plugins": [
-          "istanbul"
-        ]
-      },
-      "development": {
-        "sourceMaps": "inline",
-        "retainLines": true
       }
-    }
+    ]
   },
   "nyc": {
     "sourceMap": false,

diff --git a/src/constants.js b/src/constants.js
@@ -34,6 +34,7 @@ export const VERTICAL_ALIGN_MIDDLE = 16;
 export const VERTICAL_ALIGN_BOTTOM = 32;
 
 // Discover Jimp directory in any environment. (also in fucking karma)
+// This function is a little crazy. IDK if its needed when jimp is used as a lib
 function getJimpDir() {
     const err = new Error();
     const callLine = err.stack
@@ -42,6 +43,10 @@ function getJimpDir() {
     const reWebKit = /.*\(([^?]+\/)[^/]+\).*/;
     const reMoz = /.*@([^?]+\/).*/;
 
+    if (process.env.BABEL_ENV === 'test' && process.env.ENV === 'browser') {
+        return 'http://localhost:9877/base/test/';
+    }
+
     if (reWebKit.test(callLine)) {
         return callLine.replace(reWebKit, '$1');
     }

diff --git a/src/index.js b/src/index.js
@@ -23,13 +23,6 @@ import { parseBitmap, getBuffer, getBufferAsync } from './utils/image-bitmap';
 import { isNodePattern, throwError } from './utils/error-checking';
 import * as constants from './constants';
 
-if (
-    process.env.BABEL_ENV === 'development' &&
-    process.env.ENVIRONMENT !== 'BROWSER'
-) {
-    require('source-map-support').install();
-}
-
 const alphabet =
     '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_';
 

diff --git a/src/request.js b/src/request.js
@@ -1,6 +1,7 @@
 /* global XMLHttpRequest */
 
 if (
+    process.browser ||
     process.env.ENVIRONMENT === 'BROWSER' ||
     (typeof process.versions.electron !== 'undefined' &&
         process.type === 'renderer' &&