Adding buildpackage.js to build twin packages

- We will publish two packages:
  - azdevops-kube-summary: marked azure-devops-ui as external and removed from package.json
  - webapp-kube-summary: includes bundled azure-devops-ui

.gitignore

@@ -5,7 +5,7 @@
 
 npm-debug.log
 node_modules/
-_bundles/
+_bin/
 dist/
 dist_tests/
 *.vsix

azdevops.webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
     'azdevops-kube-summary.min': './src/index.ts'
   },
   output: {
-    path: path.resolve(__dirname, '_bundles'),
+    path: path.resolve(__dirname, '_bin/azDevOpsPackage/_bundles'),
     filename: '[name].js',
     libraryTarget: 'umd',
     library: 'azdevops-kube-summary',

buildpackage.js

@@ -0,0 +1,83 @@
+/**
+ * This is solely a build script, intended to prep the twin packages for publishing.
+ */
+
+const fs = require("fs");
+const path = require("path");
+const rimraf = require("rimraf");
+const copydir = require("copy-dir");
+const execSync = require("child_process").execSync;
+
+// AzDevOps Package Constants
+const azDevOpsPackageName = "@azurepipelines/azdevops-kube-summary";
+const azDevOpsWebPackConfigFileName = "azdevops.webpack.config.js";
+const azDevOpsPackageFolderName = "azDevOpsPackage";
+
+// WebApp Package Constants
+const webAppPackageName = "@azurepipelines/webapp-kube-summary";
+const webAppWebPackConfigFileName = "webapp.webpack.config.js";
+const webAppPackageFolderName = "webAppPackage";
+
+prepPackage(azDevOpsPackageFolderName, azDevOpsWebPackConfigFileName, editAzDevOpsPackageJson);
+prepPackage(webAppPackageFolderName, webAppWebPackConfigFileName, editWebAppPackageJson);
+
+function prepPackage(packageFolderName, webpackConfigFileName, editPackageJsonCallback) {
+    const binFolderPath = path.join(__dirname, "_bin");
+    ensureDirExists(binFolderPath);
+    
+    const packageFolderPath = path.join(binFolderPath, packageFolderName);
+    console.log(`Deleting folder: ${packageFolderName}`);
+    rimraf.sync(packageFolderPath);
+
+    console.log(`Creating folder: ${packageFolderName}`);
+    fs.mkdirSync(packageFolderPath);
+    fs.statSync
+    console.log(`Copying package.json, README.md and LICENSE.txt to ${packageFolderName}`);
+    filesToCopy = ["package.json", "README.md", "LICENSE.txt"];
+    filesToCopy.forEach(fileName => {
+        srcFilePath = path.join(__dirname, fileName);
+        targetFilePath = path.join(packageFolderPath, fileName);
+        fs.copyFileSync(srcFilePath, targetFilePath);
+    });
+
+    console.log(`Altering package.json inside ${packageFolderName}`);
+    const targetPackageJsonPath = path.join(packageFolderPath, "package.json");
+    let targetPackageJsonContent = fs.readFileSync(targetPackageJsonPath);
+    let parsedTargetPackageJson = JSON.parse(targetPackageJsonContent);
+    parsedTargetPackageJson = editPackageJsonCallback(parsedTargetPackageJson);
+    fs.writeFileSync(targetPackageJsonPath, JSON.stringify(parsedTargetPackageJson, null, 2));
+
+    console.log(`Copying dist folder to ${packageFolderName}`);
+    const srcDistFolderPath = path.join(__dirname, "dist");
+    const targetDistFolderPath = path.join(packageFolderPath, "dist");
+    copydir.sync(srcDistFolderPath, targetDistFolderPath);
+
+    console.log(`Running webpack for ${packageFolderName}`);
+    const webPackConfigFilePath = path.join(__dirname, webpackConfigFileName);
+    execSync(`webpack --mode production --config ${webPackConfigFilePath}`, {
+        stdio: 'inherit'
+    });
+
+    console.log(`Packaging ${packageFolderName}`);
+    execSync("npm pack", {
+        cwd: packageFolderPath,
+        stdio: 'inherit'
+    });
+}
+
+function ensureDirExists(dirPath) {
+    if (!fs.existsSync(dirPath)){
+        fs.mkdirSync(dirPath);
+    }
+}
+
+function editAzDevOpsPackageJson(parsedPackageJson) {
+    parsedPackageJson.name = azDevOpsPackageName;
+    delete parsedPackageJson.dependencies["azure-devops-ui"];
+    return parsedPackageJson;
+}
+
+function editWebAppPackageJson(parsedPackageJson) {
+    parsedPackageJson.name = webAppPackageName;
+    return parsedPackageJson;
+}

package.json

@@ -13,7 +13,7 @@
   "scripts": {
     "clean": "rimraf ./dist && rimraf ./_bundles",
     "compile": "npm run clean && npm run compilesrc && npm run copy-all",
-    "build": "npm run compile && webpack --mode production && npm pack",
+    "build": "npm run compile && node buildpackage.js",
     "copy-all": "npm run copy-scss && npm run copy-resources && npm run copy-images",
     "copy-scss": "copyfiles -u 1 src/**/*.scss ./dist",
     "copy-resources": "copyfiles -u 1 src/**/Resources.js ./dist",
@@ -54,6 +54,7 @@
     "@types/react": "16.8.2",
     "@types/react-dom": "16.8.2",
     "base64-inline-loader": "^1.1.1",
+    "copy-dir": "^0.4.0",
     "copy-webpack-plugin": "^4.6.0",
     "copyfiles": "^2.1.0",
     "css-loader": "^1.0.1",

webapp.webpack.config.js

@@ -0,0 +1,68 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  entry: {
+    'azdevops-kube-summary': './src/index.ts',
+    'azdevops-kube-summary.min': './src/index.ts'
+  },
+  output: {
+    path: path.resolve(__dirname, '_bin/webAppPackage/_bundles'),
+    filename: '[name].js',
+    libraryTarget: 'umd',
+    library: 'webapp-kube-summary',
+    umdNamedDefine: true
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js']
+  },
+  devtool: 'source-map',
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        sourceMap: true,
+        include: /\.min\.js$/,
+        parallel: 4
+      })
+    ]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader"
+      },
+      {
+        test: /\.scss$/,
+        use: ["style-loader", "css-loader", "./buildScripts/css-variables-loader", "sass-loader"]
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.woff$/,
+        use: [{
+          loader: 'base64-inline-loader'
+        }]
+      },
+      {
+        test: /\.html$/,
+        loader: "file-loader"
+      },
+      { test: /\.(png|jpg|svg)$/, loader: 'file-loader' },
+    ]
+  },
+  node: {
+    fs: 'empty',
+    tls: 'mock',
+    child_process: 'empty',
+    net: 'empty'
+  },
+  externals: {
+    "react": 'react',
+    "react-dom": 'react-dom'
+  }
+}