add pagkage module and browser fields

Author: cancerberoSgx

.npmignore

@@ -5,9 +5,11 @@
 !/LICENSE
 !/Readme.md
 !/dist/**/*
-!/magickApi.js
 
 # ignore these in /dist:
 /dist/assets/**/*
 /dist/spec/**/
+/dist/esm5/**/
+/dist/esm6/**/
+/dist/esm2018/**/
 /dist/bundle.js

Readme.md

@@ -4,14 +4,6 @@ This project is not affiliated with [ImageMagick](https://www.imagemagick.org) ,
 
 ## Demos and examples
 
- * Simple example. See [samples/rotate#code](samples/rotate#code). A simple webpage that has image in array and loads magickApi.js to rotate file. Demonstration site [https://knicknic.github.io/imagemagick/rotate/](https://knicknic.github.io/imagemagick/rotate/)
-
- * [https://knicknic.github.io/imagemagick/](https://knicknic.github.io/imagemagick/) a commandline sample of using ImageMagick
-    * For code see [samples/cmdline](samples/cmdline)
-
- * Used in [Croppy](https://knicknic.github.io/croppy/) to split webcomics from one long vertical strip into many panels.
-    * For code see https://github.com/KnicKnic/croppy.
-
  * Basic playground (React & TypeScript project): [![Basic playground (React & TypeScript project)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lp7lxz6l59).
 
  * Image Diff Example (React & TypeScript project): [![Basic playground for image diff (React & TypeScript project)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yvn6rkr16z).
@@ -20,6 +12,13 @@ This project is not affiliated with [ImageMagick](https://www.imagemagick.org) ,
 
  * [Picture Frame editor](https://cancerberosgx.github.io/autumn-leaves/#/imageFrame).
 
+ * Simple example. See [samples/rotate#code](samples/rotate#code). A simple webpage that has image in array and loads magickApi.js to rotate file. Demonstration site [https://knicknic.github.io/imagemagick/rotate/](https://knicknic.github.io/imagemagick/rotate/)
+
+ * [https://knicknic.github.io/imagemagick/](https://knicknic.github.io/imagemagick/) a commandline sample of using ImageMagick
+    * For code see [samples/cmdline](samples/cmdline)
+
+ * Used in [Croppy](https://knicknic.github.io/croppy/) to split webcomics from one long vertical strip into many panels.
+    * For code see https://github.com/KnicKnic/croppy.
 
 ## Status
 

package.json

@@ -4,23 +4,23 @@
   "description": "Webassembly compilation of ImageMagick",
   "main": "dist/src/index.js",
   "typings": "dist/src/index.d.ts",
-  "module": "dist/esm5/index.js",
-  "es2015": "dist/esm2018/index.js",
+  "module": "dist/bundles/wasm-imagemagick.esm-es5.js",
+  "browser": "dist/bundles/wasm-imagemagick.umd-es5.js",
   "scripts": {
     "build-wasm": "docker build -t wasm-imagemagick-build-tools . && docker run --rm --workdir /code -v \"$PWD\":/code wasm-imagemagick-build-tools bash ./build.sh",
     "build-ts": "rm -rf dist && tsc && npm run bundle",
     "bundle": "npx tsc --project tsconfig-esm5.json && npx tsc --project tsconfig-esm6.json && npx tsc --project tsconfig-esm2018.json && mkdir -p dist/bundles && npx rollup -c rollup.config.js && npx rollup -c rollup.config.js --environment NODE_ENV:production",
     "build": "npm run build-wasm && npm run build-ts",
     "prepare": "npm run build && npm run copy && npm run magickApiJs",
     "copy": "cp magick.js magick.wasm dist && cp magick.js magick.wasm spec/assets && cp -r spec/assets dist",
-    "magickApiJs": "cp dist/bundles/index.esm.js magickApi.js",
+    "magickApiJs": "cp dist/bundles/wasm-imagemagick.esm-es6.js magickApi.js",
     "clean": "sh clean.sh",
     "lint": "tslint \"src/**/*.ts\" \"spec/**/*.ts\"",
     "lint-and-fix": "tslint \"src/**/*.ts\" \"spec/**/*.ts\" --fix",
     "generateImEnums": "npx ts-node scripts/generateImEnums.ts",
     "test": "npm run test-node && npm run test-browser",
     "test-node": "cd tests/rotate && node node",
-    "test-browser-build": "tsc && browserify -d dist/spec/index.js -o dist/bundle.js",
+    "test-browser-build": "tsc && browserify --no-browser-field -d dist/spec/index.js -o dist/bundle.js",
     "test-browser": "rm -rf dist && npm run test-browser-build  && npm run copy && gulp --gulpfile spec/gulpfile.js jasmine",
     "test-browser-server": "rm -rf dist && npm run test-browser-build && npm run copy && gulp --gulpfile spec/gulpfile.js jasmine-server",
     "test-browser-start": "rm -rf dist && tsc && npm run copy && npm run test-browser-watch-all",

rollup.config.js

@@ -136,6 +136,35 @@ const UMDEs6config = {
   ),
 }
 
+
+
+const FESMEs5config = {
+  ...CommonConfig,
+  input: resolve(PATHS.entry.esm5, 'index.js'),
+  output: [
+    {
+      file: getOutputFileName(
+        resolve(PATHS.bundles, `${pkg.name}.esm-es5.js`),
+        ifProduction()
+      ),
+      format: 'es',
+      sourcemap: true,
+    },
+  ],
+  plugins: removeEmpty(
+    ([...plugins, ifProduction(terser()), babel({
+      include: 'node_modules/**', babelrc: false, presets: [
+        [
+          "@babel/preset-env",
+          {
+            "targets": "ie 10"
+          }
+        ]
+      ]
+    })])
+  ),
+}
+
 const FESMEs6config = {
   ...CommonConfig,
   input: resolve(PATHS.entry.esm6, 'index.js'),
@@ -175,6 +204,7 @@ const FESMEs2018config = {
 export default [
   UMDEs5config,
   UMDEs6config,
+  FESMEs5config,
   FESMEs6config,
   FESMEs2018config
 ]

webworker.js

@@ -1,4 +1,4 @@
-// This file helps make the compiled js file be imported as a web worker which is done by magickApi.js
+// This file helps make the compiled js file be imported as a web worker by the src/magickApi.ts file
 
 const stdout = []
 const stderr = []