[js] fix library bundling and some trivial improvement (#7550)

* [js] fix library bundling

* fix filename in code comments

js/common/README.md

@@ -10,4 +10,4 @@ This package (onnxruntime-common) is not designed for using directly. Please con
 
 ## License
 
-License information can be found [here](../../README.md#license).
+License information can be found [here](https://github.com/microsoft/onnxruntime/blob/master/README.md#license).

js/common/package.json

@@ -1,12 +1,18 @@
 {
   "license": "MIT",
   "name": "onnxruntime-common",
+  "description": "ONNXRuntime JavaScript API library",
   "repository": {
     "url": "https://github.com/Microsoft/onnxruntime.git",
     "type": "git"
   },
   "author": "fs-eire",
   "version": "1.7.0",
+  "keywords": [
+    "ONNX",
+    "ONNXRuntime",
+    "ONNX Runtime"
+  ],
   "scripts": {
     "prepare": "tsc && webpack"
   },
@@ -17,9 +23,8 @@
     "webpack-cli": "^4.6.0"
   },
   "main": "dist/ort-common.node.js",
+  "types": "./types/index.d.ts",
   "jsdelivr": "dist/ort-common.min.js",
   "unpkg": "dist/ort-common.min.js",
-  "module": "./lib/index.js",
-  "types": "./types/index.d.ts",
-  "description": "ONNXRuntime JavaScript library"
+  "module": "./lib/index.js"
 }

js/node/README.md

@@ -26,4 +26,4 @@ To use on platforms without pre-built binaries, you can build Node.js binding fr
 
 ## License
 
-License information can be found [here](../../README.md#license).
+License information can be found [here](https://github.com/microsoft/onnxruntime/blob/master/README.md#license).

js/node/package.json

@@ -1,23 +1,18 @@
 {
-  "binary": {
-    "module_path": "./bin",
-    "host": "https://onnxruntimetestdata.blob.core.windows.net/onnxruntime-node-prebuild/",
-    "napi_versions": [
-      3
-    ]
-  },
   "license": "MIT",
   "name": "onnxruntime-node",
+  "description": "ONNXRuntime Node.js binding",
   "repository": {
     "url": "https://github.com/Microsoft/onnxruntime.git",
     "type": "git"
   },
   "author": "fs-eire",
   "version": "1.7.0",
-  "dependencies": {
-    "onnxruntime-common": "file:../common",
-    "prebuild-install": "^6.1.2"
-  },
+  "keywords": [
+    "ONNX",
+    "ONNXRuntime",
+    "ONNX Runtime"
+  ],
   "scripts": {
     "build": "tsc && node ./script/build",
     "buildd": "tsc && node ./script/build --config=Debug",
@@ -30,10 +25,10 @@
     "test": "mocha ./test/test-main",
     "prepack": "node ./script/prepack"
   },
-  "keywords": [
-    "ONNX",
-    "ONNX Runtime"
-  ],
+  "dependencies": {
+    "onnxruntime-common": "file:../common",
+    "prebuild-install": "^6.1.2"
+  },
   "devDependencies": {
     "@types/fs-extra": "^9.0.6",
     "@types/klaw-sync": "^6.0.0",
@@ -56,11 +51,17 @@
     "typescript": "^4.1.3"
   },
   "main": "./lib/index.js",
+  "types": "./types/lib/index.d.ts",
   "os": [
     "win32",
     "darwin",
     "linux"
   ],
-  "types": "./types/lib/index.d.ts",
-  "description": "ONNXRuntime Node.js binding"
+  "binary": {
+    "module_path": "./bin",
+    "host": "https://onnxruntimetestdata.blob.core.windows.net/onnxruntime-node-prebuild/",
+    "napi_versions": [
+      3
+    ]
+  }
 }

js/web/README.md

@@ -152,4 +152,4 @@ ONNX Runtime Web currently supports most operators in [ai.onnx](https://github.c
 
 ## License
 
-License information can be found [here](../../README.md#license).
+License information can be found [here](https://github.com/microsoft/onnxruntime/blob/master/README.md#license).

js/web/karma.conf.js

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 
 const bundleMode = require('minimist')(process.argv)['bundle-mode'] || 'dev';  // 'dev'|'perf'|undefined;
 const karmaPlugins = require('minimist')(process.argv)['karma-plugins'] || undefined;

js/web/package.json

@@ -1,25 +1,24 @@
 {
+  "license": "MIT",
   "name": "onnxruntime-web",
-  "version": "1.7.0",
   "description": "A Javascript library for running ONNX models on browsers",
-  "main": "./lib/index.js",
-  "browser": "./dist/ort-web.min.js",
-  "types": "./types/lib/index.d.ts",
+  "repository": {
+    "url": "https://github.com/Microsoft/onnxruntime.git",
+    "type": "git"
+  },
+  "author": "fs-eire",
+  "version": "1.7.0",
+  "keywords": [
+    "ONNX",
+    "ONNXRuntime",
+    "ONNX Runtime"
+  ],
   "scripts": {
-    "prepare": "tsc && node ./script/prepare-test-data",
+    "prepare": "tsc",
     "build": "node ./script/build",
-    "test": "node ./script/test-runner-cli",
+    "test": "node ./script/prepare-test-data && node ./script/test-runner-cli",
     "prepack": "node ./script/prepack"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Microsoft/onnxruntime.git"
-  },
-  "keywords": [
-    "ONNX Runtime Web"
-  ],
-  "author": "fs-eire",
-  "license": "MIT",
   "dependencies": {
     "flatbuffers": "^1.12.0",
     "guid-typescript": "^1.0.9",
@@ -67,5 +66,15 @@
     "typescript": "^4.2.3",
     "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0"
+  },
+  "main": "dist/ort-web.node.js",
+  "types": "./types/lib/index.d.ts",
+  "jsdelivr": "dist/ort.min.js",
+  "unpkg": "dist/ort.min.js",
+  "module": "./lib/index.js",
+  "browser": {
+    "fs": false,
+    "path": false,
+    "util": false
   }
 }

js/web/script/test-runner-cli.ts

@@ -32,14 +32,18 @@ const TEST_DATA_OP_ROOT = path.join(TEST_ROOT, 'data', 'ops');
 
 const TEST_DATA_BASE = args.env === 'node' ? TEST_ROOT : '/base/test/';
 
-npmlog.verbose('TestRunnerCli.Init', 'Loading whitelist...');
+let whitelist: Test.WhiteList;
+const shouldLoadSuiteTestData = (args.mode === 'suite0');
+if (shouldLoadSuiteTestData) {
+  npmlog.verbose('TestRunnerCli.Init', 'Loading whitelist...');
 
-// The following is a whitelist of unittests for already implemented operators.
-// Modify this list to control what node tests to run.
-const jsonWithComments = fs.readFileSync(path.resolve(TEST_ROOT, './test-suite-whitelist.jsonc')).toString();
-const json = stripJsonComments(jsonWithComments, {whitespace: true});
-const whitelist = JSON.parse(json) as Test.WhiteList;
-npmlog.verbose('TestRunnerCli.Init', 'Loading whitelist... DONE');
+  // The following is a whitelist of unittests for already implemented operators.
+  // Modify this list to control what node tests to run.
+  const jsonWithComments = fs.readFileSync(path.resolve(TEST_ROOT, './test-suite-whitelist.jsonc')).toString();
+  const json = stripJsonComments(jsonWithComments, {whitespace: true});
+  whitelist = JSON.parse(json) as Test.WhiteList;
+  npmlog.verbose('TestRunnerCli.Init', 'Loading whitelist... DONE');
+}
 
 // The default backends and opset version lists. Those will be used in suite tests.
 const DEFAULT_BACKENDS: readonly TestRunnerCliArgs.Backend[] =
@@ -55,7 +59,6 @@ const nodeTests = new Map<string, Test.ModelTestGroup[]>();
 const onnxTests = new Map<string, Test.ModelTestGroup>();
 const opTests = new Map<string, Test.OperatorTestGroup[]>();
 
-const shouldLoadSuiteTestData = (args.mode === 'suite0');
 if (shouldLoadSuiteTestData) {
   npmlog.verbose('TestRunnerCli.Init', 'Loading test groups for suite test...');
 

js/web/webpack.config.js

@@ -1,90 +1,85 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
 const path = require('path');
 const webpack = require('webpack');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const minimist = require('minimist');
 
-function buildAllConfig({
-  suffix = '',
-  format = 'umd',
-  target = 'ES2017',
-  mode = 'production',
-  devtool = 'source-map'
-}) {
+// common config for release bundle
+function buildConfig({ filename, format, target, mode, devtool }) {
   return {
     entry: path.resolve(__dirname, 'lib/index.ts'),
     output: {
       path: path.resolve(__dirname, 'dist'),
-      filename: `ort${suffix}.js`,
+      filename,
       library: {
-        name: 'ort',
         type: format
       }
     },
-    externals: {
-      'fs': 'fs',
-      'path': 'path',
-      'util': 'util',
-    },
     resolve: { extensions: ['.ts', '.js'] },
     plugins: [new webpack.WatchIgnorePlugin({ paths: [/\.js$/, /\.d\.ts$/] })],
     module: {
       rules: [{
-        test: /\.tsx?$/,
+        test: /\.ts$/,
         use: [
           {
             loader: 'ts-loader',
             options: {
-              compilerOptions: { target: target }
+              compilerOptions: { target }
             }
           }
         ]
       }]
     },
-    mode: mode,
-    devtool: devtool,
+    mode,
+    devtool
   };
 }
 
-function buildWebConfig({
+// "ort{.min}.js" config
+function buildOrtConfig({
   suffix = '',
-  format = 'umd',
-  target = 'ES2017',
+  target = 'es5',
   mode = 'production',
   devtool = 'source-map'
 }) {
-  return {
-    entry: path.resolve(__dirname, 'lib/index.ts'),
-    output: {
-      path: path.resolve(__dirname, 'dist'),
-      filename: `ort-web${suffix}.js`,
-      library: {
-        type: format
-      }
-    },
-    externals: {
-      'onnxruntime-common': 'ort',
-      'fs': 'fs',
-      'path': 'path',
-      'util': 'util',
-    },
-    resolve: { extensions: ['.ts', '.js'] },
-    plugins: [new webpack.WatchIgnorePlugin({ paths: [/\.js$/, /\.d\.ts$/] })],
-    module: {
-      rules: [{
-        test: /\.tsx?$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              compilerOptions: { target: target }
-            }
-          }
-        ]
-      }]
-    },
-    mode: mode,
-    devtool: devtool,
+  const config = buildConfig({ filename: `ort${suffix}.js`, format: 'umd', target, mode, devtool });
+  // set global name 'ort'
+  config.output.library.name = 'ort';
+  // do not use those node builtin modules in browser
+  config.resolve.fallback = { path: false, fs: false, util: false };
+  return config;
+}
+
+// "ort-web{.min|.node}.js" config
+function buildOrtWebConfig({
+  suffix = '',
+  format = 'umd',
+  target = 'es5',
+  mode = 'production',
+  devtool = 'source-map'
+}) {
+  const config = buildConfig({ filename: `ort-web${suffix}.js`, format, target, mode, devtool });
+  // exclude onnxruntime-common from bundle
+  config.externals = {
+    'onnxruntime-common': {
+      commonjs: "onnxruntime-common",
+      commonjs2: "onnxruntime-common",
+      root: 'ort'
+    }
   };
+  // in nodejs, treat as external dependencies
+  if (format === 'commonjs') {
+    config.externals.path = 'path';
+    config.externals.fs = 'fs';
+    config.externals.util = 'util';
+  }
+  // in browser, do not use those node builtin modules
+  if (format === 'umd') {
+    config.resolve.fallback = { path: false, fs: false, util: false };
+  }
+  return config;
 }
 
 function buildTestRunnerConfig({
@@ -108,14 +103,14 @@ function buildTestRunnerConfig({
       'onnxruntime-common': 'ort',
       'fs': 'fs',
     },
-    resolve: { extensions: ['.ts', '.js'] },
+    resolve: { extensions: ['.ts', '.js'], aliasFields: [] },
     plugins: [
       new webpack.WatchIgnorePlugin({ paths: [/\.js$/, /\.d\.ts$/] }),
       new NodePolyfillPlugin()
     ],
     module: {
       rules: [{
-        test: /\.tsx?$/,
+        test: /\.ts$/,
         use: [
           {
             loader: 'ts-loader',
@@ -139,10 +134,26 @@ module.exports = () => {
 
   if (bundleMode === 'prod') {
     builds.push(
-      buildAllConfig({ suffix: '.min', target: 'es5' }),
-      buildWebConfig({ suffix: '.min', target: 'es5' }),
-      buildAllConfig({ mode: 'development', devtool: 'inline-source-map', target: 'es5' }),
-      buildWebConfig({ mode: 'development', devtool: 'inline-source-map', target: 'es5' }),
+      // ort.min.js
+      buildOrtConfig({ suffix: '.min' }),
+      // ort.js
+      buildOrtConfig({ mode: 'development', devtool: 'inline-source-map' }),
+      // ort.es6.min.js
+      buildOrtConfig({ suffix: '.es6.min', target: 'es6' }),
+      // ort.es6.js
+      buildOrtConfig({ suffix: '.es6', mode: 'development', devtool: 'inline-source-map', target: 'es6' }),
+
+      // ort-web.min.js
+      buildOrtWebConfig({ suffix: '.min' }),
+      // ort-web.js
+      buildOrtWebConfig({ mode: 'development', devtool: 'inline-source-map' }),
+      // ort-web.es6.min.js
+      buildOrtWebConfig({ suffix: '.es6.min', target: 'es6' }),
+      // ort-web.es6.js
+      buildOrtWebConfig({ suffix: '.es6', mode: 'development', devtool: 'inline-source-map', target: 'es6' }),
+
+      // ort-web.node.js
+      buildOrtWebConfig({ suffix: '.node', format: 'commonjs' }),
     );
   }