Improve build process and fix usage with certain bundlers (#1158)

* Improve build process and fix usage with certain bundlers

* Match fullstop exactly

Author: xenova

package.json

@@ -26,7 +26,7 @@
     "format:check": "prettier --check .",
     "typegen": "tsc --build",
     "dev": "webpack serve --no-client-overlay",
-    "build": "webpack && npm run typegen && rm ./dist/ort.bundle.min.mjs && cp ./node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.jsep.mjs ./dist",
+    "build": "webpack && npm run typegen",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --verbose",
     "readme": "python ./docs/scripts/build_readme.py",
     "docs-api": "node ./docs/scripts/generate.js",

webpack.config.js

@@ -1,9 +1,63 @@
 import TerserPlugin from "terser-webpack-plugin";
 import { fileURLToPath } from "url";
 import path from "path";
+import fs from "fs";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/**
+ * Plugin to post-process build files. Required to solve certain issues with ESM module output.
+ * See https://github.com/webpack/webpack/issues/17121 for more information.
+ * 
+ * @see https://webpack.js.org/contribute/writing-a-plugin/
+ */
+class PostBuildPlugin {
+
+  apply(compiler) {
+    compiler.hooks.done.tap('PostBuildPlugin', () => {
+      const dist = path.join(__dirname, 'dist');
+      const ORT_JSEP_FILE = 'ort-wasm-simd-threaded.jsep.mjs';
+      const ORT_BUNDLE_FILE = 'ort.bundle.min.mjs';
+
+      // 1. Remove unnecessary files
+      {
+        const file = path.join(dist, ORT_BUNDLE_FILE);
+        if (fs.existsSync(file)) fs.unlinkSync(file);
+      }
+      
+      // 2. Copy unbundled JSEP file
+      {
+        const src = path.join(__dirname, 'node_modules/onnxruntime-web/dist', ORT_JSEP_FILE);
+        const dest = path.join(dist, ORT_JSEP_FILE);
+        fs.copyFileSync(src, dest);
+      }
+
+      // 3. Replace strings in certain files
+      {
+        const files = ['transformers.js', 'transformers.min.js'];
+        for (const file of files) {
+          const filePath = path.join(dist, file);
+          let content = fs.readFileSync(filePath, 'utf8');
+          content = content.replace(
+            // Replace all instances of `new URL("./", import.meta.url)` with `new URL(import.meta.url)`,
+            // as it causes several issues with build tools and bundlers.
+            // 
+            // See the following issues for more information:
+            // - https://github.com/huggingface/transformers.js/issues/911
+            // - https://github.com/huggingface/transformers.js/issues/984
+            // - https://github.com/huggingface/transformers.js/issues/980
+            // - https://github.com/huggingface/transformers.js/issues/1021
+            // - https://github.com/huggingface/transformers.js/issues/1026
+            new RegExp('new URL\\(["\']\\.\\\/["\'],\\s*import\\.meta\\.url\\)', 'gm'),
+            "new URL(import.meta.url)",
+          );
+          fs.writeFileSync(filePath, content, 'utf8');
+        }
+      }
+    });
+  }
+}
+
 /**
  * Helper function to create webpack configurations.
  * @param {Object} options Options for creating a webpack target.
@@ -12,6 +66,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
  * @param {string} options.type Type of library.
  * @param {string} options.ignoreModules The list of modules to ignore.
  * @param {string} options.externalModules The list of modules to set as external.
+ * @param {Object[]} options.plugins List of plugins to use.
  * @returns {import('webpack').Configuration} One webpack target.
  */
 function buildConfig({
@@ -20,6 +75,7 @@ function buildConfig({
   type = "module", // 'module' | 'commonjs'
   ignoreModules = [],
   externalModules = [],
+  plugins = [],
 } = {}) {
   const outputModule = type === "module";
 
@@ -75,6 +131,7 @@ function buildConfig({
       },
       port: 8080,
     },
+    plugins,
   };
 
   if (outputModule) {
@@ -110,6 +167,7 @@ const NODE_EXTERNAL_MODULES = [
 // Web-only build
 const WEB_BUILD = buildConfig({
   type: "module",
+  plugins: [new PostBuildPlugin()],
 });
 
 // Node-compatible builds