switch from browserify to webpack (#1140)

* switch from browserify to webpack * upgrade dtslint * add browser field * fix build cache * remove support for really old TS versions
jimp-dev · Feb 4, 2023 · ecdd71e · ecdd71e
1 parent 3ca7608
commit ecdd71e
Show file tree

Hide file tree

Showing 25 changed files with 1,112 additions and 2,382 deletions.
diff --git a/.github/actions/build-cache/action.yml b/.github/actions/build-cache/action.yml
@@ -10,5 +10,7 @@ runs:
         path: |
           node_modules
           packages/*/dist
+          packages/*/es
+          packages/jimp/browser/lib
         key: ${{ github.run_id }}
         restore-keys: ${{ github.run_id }}
diff --git a/.gitignore b/.gitignore
@@ -48,3 +48,4 @@ package-lock.json
 dist/
 # ESM Version
 es/
+jimp.js.*
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -31,7 +31,7 @@ If you know how to code, we welcome you to send fixes and new features, but in o
 ```sh
 yarn # install and link all packages in monorepo
 
-yarn build # build ES5, ESM, and browserify
+yarn build
 # or
 yarn build:watch # build ES5 version in watch mode. Good to run while testing or developing.
 ```

diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "babel-plugin-source-map-support": "^2.1.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "cross-env": "^6.0.0",
-    "dtslint": "^0.9.8",
+    "dtslint": "^4.2.1",
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-xo": "^0.43.1",
@@ -58,15 +58,13 @@
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
     "lerna": "^3.16.4",
-    "lerna-changelog": "^0.8.2",
     "lint-staged": "^9.2.5",
     "mocha": "^6.2.0",
     "nyc": "^14.1.1",
     "patch-package": "^6.5.1",
     "prettier": "^2.8.3",
     "should": "^13.2.3",
-    "source-map-support": "^0.5.13",
-    "watchify": "^3.11.1"
+    "source-map-support": "^0.5.13"
   },
   "auto": {
     "plugins": [

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -5,6 +5,7 @@
   "main": "dist/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
+  "sideEffects": false,
   "files": [
     "dist",
     "es",

diff --git a/packages/custom/types/index.d.ts b/packages/custom/types/index.d.ts
@@ -1,4 +1,4 @@
-// TypeScript Version: 3.1
+// Minimum TypeScript Version: 3.2
 // See the `jimp` package index.d.ts for why the version is not 2.8
 import {
   FunctionRet,

diff --git a/packages/jimp/README.md b/packages/jimp/README.md
@@ -77,21 +77,6 @@ If you're using a web bundles (webpack, rollup, parcel) you can benefit from usi
 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 file, URL, dimensions, a Jimp instance or a buffer and returns a Promise:

diff --git a/packages/jimp/browser/examples/example1.html b/packages/jimp/browser/examples/example1.html
@@ -5,7 +5,7 @@
   </head>
   <body>
     <h1>Demonstrates loading a local file using Jimp on the main thread</h1>
-    <script src="../lib/jimp.min.js"></script>
+    <script src="../lib/jimp.js"></script>
     <script>
       Jimp.read(
         "https://upload.wikimedia.org/wikipedia/commons/0/01/Bot-Test.jpg"

diff --git a/packages/jimp/browser/examples/jimp-worker.js b/packages/jimp/browser/examples/jimp-worker.js
@@ -1,7 +1,7 @@
 /* eslint-env worker */
 /* global Jimp */
 
-importScripts("../lib/jimp.min.js");
+importScripts("../lib/jimp.js");
 
 self.addEventListener("message", (e) => {
   Jimp.read(e.data).then((lenna) => {

diff --git a/packages/jimp/browser/examples/test.html b/packages/jimp/browser/examples/test.html
@@ -5,7 +5,7 @@
   </head>
   <body>
     <!-- Demonstrates loading a local file using Jimp on the main thread -->
-    <script src="../lib/jimp.min.js"></script>
+    <script src="../lib/jimp.js"></script>
     <script>
       function dropShadow(x, y, b, a) {
         var img = new Jimp(

diff --git a/packages/jimp/browser/lib/fonts b/packages/jimp/browser/lib/fonts
diff --git a/packages/jimp/package.json b/packages/jimp/package.json
@@ -5,13 +5,7 @@
   "main": "dist/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
-  "typesVersions": {
-    ">=3.1.0-0": {
-      "*": [
-        "types/ts3.1/index.d.ts"
-      ]
-    }
-  },
+  "browser": "browser/lib/jimp.js",
   "tonicExampleFilename": "example.js",
   "files": [
     "browser",
@@ -26,16 +20,15 @@
     "test": "cross-env BABEL_ENV=test mocha --require @babel/register",
     "test:watch": "npm run test -- --reporter min --watch",
     "test:coverage": "nyc npm run test",
-    "browser-build": "node tools/browser-build.js test",
     "build": "npm run build:browser && npm run build:node:production && npm run build:module",
     "build:watch": "npm run build:node:debug -- -- --watch --verbose",
     "build:debug": "npm run build:browser:debug && npm run build:node:debug",
     "build:module": "cross-env BABEL_ENV=module babel src -d es --source-maps --config-file ../../babel.config.js",
     "build:node": "babel src -d dist --source-maps --config-file ../../babel.config.js",
     "build:node:debug": "cross-env BABEL_ENV=development npm run build:node",
     "build:node:production": "cross-env BABEL_ENV=production npm run build:node",
-    "build:browser": "cross-env BABEL_ENV=production node tools/browser-build.js prepublish",
-    "build:browser:debug": "cross-env BABEL_ENV=development ENV=browser node tools/browser-build.js prepublish"
+    "build:browser": "cross-env NODE_ENV=production webpack",
+    "build:browser:debug": "cross-env NODE_ENV=development ENV=browser webpack"
   },
   "keywords": [
     "image",
@@ -70,27 +63,11 @@
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-source-map-support": "^2.1.1",
-    "babelify": "^10.0.0",
-    "browserify": "^16.5.0",
-    "cross-env": "^6.0.0",
-    "dtslint": "^0.9.8",
-    "envify": "^4.1.0",
-    "eslint": "^6.4.0",
     "express": "^4.17.1",
-    "husky": "^3.0.5",
-    "karma": "^4.3.0",
-    "karma-browserify": "^6.1.0",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^1.2.0",
-    "lerna": "^3.16.4",
-    "lerna-changelog": "^0.8.2",
-    "lint-staged": "^9.2.5",
-    "mocha": "^6.2.0",
-    "nyc": "^14.1.1",
+    "path-browserify": "^1.0.1",
     "source-map-support": "^0.5.13",
-    "tfilter": "^1.0.1",
-    "uglify-js": "^3.6.0",
-    "watchify": "^3.11.1"
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "nyc": {
     "sourceMap": false,

diff --git a/packages/jimp/tools/browser-build.js b/packages/jimp/tools/browser-build.js
diff --git a/packages/jimp/tools/server.js b/packages/jimp/tools/server.js
@@ -6,6 +6,7 @@ const express = require("express");
 const app = express();
 
 app.use(express.static(path.resolve(__dirname, "../browser")));
+app.use(express.static(path.resolve(__dirname, "../")));
 app.listen(8080);
 
 console.log("Serving on http://127.0.0.1:8080");