Expose 3Dmol as ES6 module

package.json

@@ -32,8 +32,8 @@
   "types": "build/types/index.d.ts",
   "scripts": {
     "build": "npm run build:dev  && npm run build:prod && npm run generate:tests && npm run doc",
-    "build:dev": "webpack --config webpack.dev.js --mode development",
-    "build:prod": "webpack --config webpack.prod.js --mode production",
+    "build:dev": "webpack --mode development",
+    "build:prod": "webpack --mode production",
     "prepare": "npm run build:dev  && npm run build:prod",
     "jest": "npx jest --testPathIgnorePatterns=render.test.js",
     "test": "npm run generate:jest && npm run jest && npm run glcheck",

src/3Dmol.ts

@@ -0,0 +1,18 @@
+export * from "./autoload";
+export * from "./colors";
+export * from "./glcartoon";
+export * from "./GLDraw";
+export * from "./GLModel";
+export * from "./GLShape";
+export * from "./GLViewer";
+export * from "./Gradient";
+export * from "./Label";
+export * from "./parsers";
+export * from "./partialCharges";
+export * from "./ProteinSurface4";
+export * from "./specs";
+export * from "./utilities";
+export * from "./VolumeData";
+export * from "./VolumetricRender";
+export * from "./WebGL/math";
+export * from "./WebGL/shapes";

src/index.ts

@@ -1,24 +1,7 @@
 // Create the global $3Dmol "namespace"
 
 
-export * from "./Gradient";
-export * from "./colors";
-export * from "./Label";
-export * from "./partialCharges";
-export * from "./parsers";
-export * from "./WebGL/math";
-export * from "./WebGL/shapes";
-export * from "./utilities";
-export * from "./ProteinSurface4"
-export * from "./VolumeData"
-export * from "./VolumetricRender"
-export * from "./GLShape"
-export * from "./GLDraw"
-export * from "./glcartoon"
-export * from "./GLModel"
-export * from "./GLViewer"
-export * from "./autoload"
-export * from "./specs"
+export * from "./3Dmol";
 
 //import * as $ from 'jquery';
 declare var __webpack_exports__: any;

webpack.common.js

@@ -1,54 +0,0 @@
-/* eslint-disable no-undef*/
-const path = require("path");
-const webpack = require("webpack");
-const pkg = require("./package.json");
-const ESLintPlugin = require('eslint-webpack-plugin');
-
-const banner = `${pkg.name} v${pkg.version}
-${pkg.description}
-Author: ${pkg.author}`;
-
-module.exports = {
-  target: "web",
-  entry: {
-    '3Dmol': [
-      "./src/index.ts",
-      "./src/SurfaceWorker.js",
-      "./src/exporter.js"
-    ],
-    '3Dmol.ui': [
-      "./src/ui/ui.js",
-      "./src/ui/state.js",
-      "./src/ui/icon.js",
-      "./src/ui/form.js",
-      "./src/ui/defaultValues.js"
-    ]
-  },
-  output: {
-    path: path.resolve(__dirname, "build"),
-    library: '[name]',
-    libraryTarget: "umd",
-    globalObject: "this"
-  },
-  resolve: {
-    extensions: [".ts", ".tsx", ".js", ".json"],
-  },
-  module: {
-    rules: [
-      { test: /\.tsx?$/, loader: "ts-loader" },
-      { test: /\.frag$/, loader: "raw-loader" },
-      { test: /\.vert$/, loader: "raw-loader" }
-    ],
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      MMTF: path.resolve(__dirname, "./src/vendor/mmtf.js"),
-      $: "jquery"
-    }),
-    new webpack.BannerPlugin({ banner }),
-    new ESLintPlugin({exclude: ['node_modules']})
-  ],
-  stats: {
-    errorDetails: true,
-  }
-};

webpack.config.js

@@ -0,0 +1,107 @@
+/* eslint-disable no-undef*/
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const pkg = require("./package.json");
+const ESLintPlugin = require("eslint-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin');
+
+const banner = `${pkg.name} v${pkg.version}
+${pkg.description}
+Author: ${pkg.author}`;
+
+base_config = {
+  target: "web",
+  output: {
+    path: path.resolve(__dirname, "build"),
+  },
+  experiments: {
+    outputModule: true, // Required for ES modules
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".json"],
+  },
+  module: {
+    rules: [
+      { test: /\.tsx?$/, loader: "ts-loader" },
+      { test: /\.frag$/, loader: "raw-loader" },
+      { test: /\.vert$/, loader: "raw-loader" },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      MMTF: path.resolve(__dirname, "./src/vendor/mmtf.js"),
+      $: "jquery",
+    }),
+    new webpack.BannerPlugin({ banner }),
+    new ESLintPlugin({ exclude: ["node_modules"] }),
+  ],
+  stats: {
+    errorDetails: true,
+  },
+};
+
+umd_config = {
+  entry: {
+    "3Dmol": ["./src/index.ts", "./src/SurfaceWorker.js", "./src/exporter.js"],
+    "3Dmol.ui": [
+      "./src/ui/ui.js",
+      "./src/ui/state.js",
+      "./src/ui/icon.js",
+      "./src/ui/form.js",
+      "./src/ui/defaultValues.js",
+    ],
+  },
+  output: {
+    library: "[name]",
+    libraryTarget: "umd",
+    globalObject: "this",
+  },
+};
+
+es6_config = {
+  entry: {
+    "3Dmol.es6": ["./src/3Dmol.ts"],
+  },
+  output: {
+    libraryTarget: "module",
+  },
+}
+
+env_config = {
+  development: {
+    mode: "development",
+    devtool: "inline-source-map",
+    output: {
+      filename: "[name].js",
+    },
+  },
+  production: {
+    mode: "production",
+    optimization: {
+      usedExports: false,
+      minimizer: [
+        new TerserPlugin({
+          parallel: true,
+          terserOptions: {
+            keep_classnames: true,
+            compress: true,
+            mangle: {
+              reserved: ["MarchingCube"],
+            },
+          },
+        }),
+      ],
+    },
+    output: {
+      filename: `[name]-min.js`,
+    },
+  },
+};
+
+module.exports = function (env, argv) {
+  return [
+    merge(base_config, umd_config, env_config[argv["mode"]]),
+    merge(base_config, es6_config, env_config[argv["mode"]]),
+  ];
+};

webpack.dev.js

@@ -1,11 +0,0 @@
-/* eslint-disable no-undef*/
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-  mode: 'development',
-  devtool: 'inline-source-map',
-  output: {
-    filename: '[name].js',
-  },
-});

webpack.prod.js

@@ -1,26 +0,0 @@
-/* eslint-disable no-undef*/
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-const TerserPlugin = require('terser-webpack-plugin');
-
-module.exports = merge(common, {
-  mode: "production",
-  optimization: {
-    usedExports: false,
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-        terserOptions: {
-          keep_classnames: true,
-          compress: true,
-          mangle: {
-            reserved: ["MarchingCube"],
-          },
-        },
-      }),
-    ],
-  },
-  output: {
-    filename: `[name]-min.js`,
-  },
-});