npm: add 'voyager.standalone.js' as fully standalone bundle (#299)

Author: IvanGoncharov

package.json

@@ -17,9 +17,10 @@
     "serve": "ts-node ./scripts/serve-directory.ts -p 9090 demo-dist",
     "clean:release": "rm -rf middleware",
     "clean:worker": "rm -rf worker-dist",
-    "bundle:standalone": "webpack --config=webpack.config.ts --mode=production",
+    "bundle:min": "webpack --config=webpack.config.ts --mode=production --env min",
+    "bundle:standalone": "webpack --config=webpack.config.ts --mode=production --env standalone",
     "bundle:lib": "webpack --config=webpack.config.ts --mode=production --env lib",
-    "bundle": "rm -rf dist && npm run bundle:lib && npm run bundle:standalone",
+    "bundle": "rm -rf dist && npm run bundle:lib && npm run bundle:standalone && npm run bundle:min",
     "compile:middleware": "tsc -d src/middleware/index.ts --outDir middleware --lib ES6,DOM,esnext.asynciterable",
     "build:worker": "npm run clean:worker && docker-compose up --abort-on-container-exit --build build-worker",
     "build:release": "npm run build:worker && npm run bundle && npm run compile:middleware && npm run declarations",

webpack.config.ts

@@ -11,89 +11,118 @@ const BANNER = `GraphQL Voyager - Represent any GraphQL API as an interactive gr
   Repo: ${packageJSON.repository.url}`;
 
 interface Env {
+  min?: boolean;
   lib?: boolean;
+  standalone?: boolean;
 }
 
 export default function buildWebpackConfig(env: Env): webpack.Configuration {
-  return {
-    performance: {
-      hints: false,
-    },
+  if (env.lib === true) {
+    return {
+      ...baseConfig,
+      externals: NodeExternals(),
+      output: {
+        ...baseConfig.output,
+        filename: 'voyager.lib.js',
+      },
+    };
+  }
 
-    optimization: {
-      minimize: !env.lib,
-    },
+  if (env.standalone === true) {
+    return {
+      ...baseConfig,
+      optimization: { minimize: true },
+      externals: undefined,
+      output: {
+        ...baseConfig.output,
+        filename: 'voyager.standalone.js',
+      },
+    };
+  }
 
-    resolve: {
-      extensions: ['.ts', '.tsx', '.mjs', '.js', '.json', '.css', '.svg'],
-      alias: { '../../worker': '../../worker-dist' },
-    },
-
-    externals: env.lib
-      ? NodeExternals()
-      : {
-          react: {
-            root: 'React',
-            commonjs2: 'react',
-            commonjs: 'react',
-            amd: 'react',
-          },
-          'react-dom': {
-            root: 'ReactDOM',
-            commonjs2: 'react-dom',
-            commonjs: 'react-dom',
-            amd: 'react-dom',
-          },
-        },
-    entry: './src/index.tsx',
-    output: {
-      path: path.resolve(__dirname, 'dist'),
-      filename: env.lib ? 'voyager.lib.js' : 'voyager.min.js',
-      sourceMapFilename: '[file].map',
-      library: 'GraphQLVoyager',
-      libraryTarget: 'umd',
-      umdNamedDefine: true,
-    },
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          use: {
-            loader: 'ts-loader',
-            options: { compilerOptions: { noEmit: false } },
-          },
-          exclude: [/\.(spec|e2e)\.ts$/],
-        },
-        {
-          test: /\.css$/,
-          exclude: /variables\.css$/,
-          use: [
-            MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
-              options: { sourceMap: true },
-            },
-            { loader: 'postcss-loader', options: { sourceMap: true } },
-          ],
+  // TODO: delete in next major version
+  if (env.min === true) {
+    return {
+      ...baseConfig,
+      optimization: { minimize: true },
+      externals: {
+        react: {
+          root: 'React',
+          commonjs2: 'react',
+          commonjs: 'react',
+          amd: 'react',
         },
-        {
-          test: /variables\.css$/,
-          use: [{ loader: 'postcss-variables-loader?es5=1' }],
+        'react-dom': {
+          root: 'ReactDOM',
+          commonjs2: 'react-dom',
+          commonjs: 'react-dom',
+          amd: 'react-dom',
         },
-        {
-          test: /\.svg$/,
-          issuer: /\.tsx?$/,
-          use: [{ loader: '@svgr/webpack' }],
+      },
+      output: {
+        ...baseConfig.output,
+        filename: 'voyager.min.js',
+      },
+    };
+  }
+  throw new Error('Please specify correct env');
+}
+
+const baseConfig: webpack.Configuration = {
+  performance: {
+    hints: false,
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.mjs', '.js', '.json', '.css', '.svg'],
+    alias: { '../../worker': '../../worker-dist' },
+  },
+  entry: './src/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    sourceMapFilename: '[file].map',
+    library: 'GraphQLVoyager',
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: {
+          loader: 'ts-loader',
+          options: { compilerOptions: { noEmit: false } },
         },
-      ],
-    },
+        exclude: [/\.(spec|e2e)\.ts$/],
+      },
+      {
+        test: /\.css$/,
+        exclude: /variables\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: { sourceMap: true },
+          },
+          { loader: 'postcss-loader', options: { sourceMap: true } },
+        ],
+      },
+      {
+        test: /variables\.css$/,
+        use: [{ loader: 'postcss-variables-loader?es5=1' }],
+      },
+      {
+        test: /\.svg$/,
+        issuer: /\.tsx?$/,
+        use: [{ loader: '@svgr/webpack' }],
+      },
+    ],
+  },
 
-    plugins: [
-      new MiniCssExtractPlugin({
-        filename: 'voyager.css',
-      }),
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'voyager.css',
+    }),
 
-      new webpack.BannerPlugin(BANNER),
-    ],
-  };
-}
+    new webpack.BannerPlugin(BANNER),
+  ],
+};