Webpack build system (POC) (magenta#191)

* Move shell scripts

* Add webpack build system

* Add lib build target file

* Remove build demos shell script

* Update yarn.lock

* Update yarn prepublish

music/package.json

@@ -8,7 +8,6 @@
   "unpkg": "dist/magentamusic.js",
   "dependencies": {
     "@tensorflow/tfjs": "^0.13.3",
-    "@types/ndarray": "^1.0.6",
     "fft.js": "^4.0.3",
     "midiconvert": "^0.4.7",
     "ndarray-resample": "^1.0.1",
@@ -20,6 +19,7 @@
   "devDependencies": {
     "@types/clone": "^0.1.30",
     "@types/file-saver": "^1.3.0",
+    "@types/ndarray": "^1.0.6",
     "@types/tape": "^4.2.32",
     "@types/webmidi": "^2.0.2",
     "audio-recorder-polyfill": "^0.1.2",
@@ -30,25 +30,31 @@
     "file-saver-typescript": "^1.0.1",
     "fs": "^0.0.1-security",
     "http-server": "^0.11.1",
+    "in-publish": "^2.0.0",
     "tape": "^4.9.0",
+    "ts-loader": "^5.3.0",
     "ts-node": "^5.0.1",
     "tsify": "^3.0.4",
     "tslint": "^5.9.1",
     "typedoc": "^0.11.1",
     "typedoc-plugin-sourcefile-url": "^1.0.3",
-    "typescript": "^2.7.2"
+    "typescript": "^2.7.2",
+    "webpack": "^4.24.0",
+    "webpack-cli": "^3.1.2"
   },
   "scripts": {
-    "prepublish": "yarn lint && yarn test && yarn build && yarn doc && yarn bundle",
+    "prepublish": "in-publish && yarn lint && yarn test && yarn build && yarn docs && yarn bundle || not-in-publish",
     "build": "tsc && cp src/protobuf/proto.* es5/protobuf",
-    "bundle": "browserify --standalone mm src/index.ts -p [tsify] > dist/magentamusic.js",
+    "bundle": "webpack --config ./webpack/lib.config.ts",
     "lint": "tslint -c ../tslint.json -p . -t verbose",
     "test": "ts-node node_modules/tape/bin/tape src/**/*_test.ts",
-    "build-demos": "cd demos && ./build-demos.sh",
+    "build-demos": "webpack --config ./webpack/demo.config.ts",
     "publish-demos": "yarn build-demos && mkdir -p ../docs/music/demos && cp demos/*.{js,html,mid,css} ../docs/music/demos",
-    "run-demos": "yarn build-demos && http-server demos/",
-    "proto": "sh compile-proto.sh",
-    "doc": "sh generate-docs.sh && yarn publish-demos"
+    "run-demos": "yarn build-demos && yarn serve-demos",
+    "serve-demos": "http-server demos/",
+    "serve-dist": "http-server dist/",
+    "proto": "sh ./scripts/compile-proto.sh",
+    "docs": "sh ./scripts/generate-docs.sh && yarn publish-demos"
   },
   "author": "Magenta",
   "license": "Apache-2.0",

music/src/lib.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================================
+ */
+import * as mm from './index';
+// tslint:disable-next-line
+(window as any).mm = mm;

music/webpack/base.config.ts

@@ -0,0 +1,12 @@
+export const baseConfig = {
+  module: {
+    rules: [{
+      test: /\.ts$/,
+      exclude: /node_modules/,
+      use: 'ts-loader',
+    }],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+};

music/webpack/demo.config.ts

@@ -0,0 +1,28 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import {baseConfig} from './base.config';
+
+const getDemos = source => {
+  return fs.readdirSync(source)
+      .filter(name => path.extname(name) === '.html' && name !== 'index.html')
+      .map(name => path.basename(name, '.html'));
+};
+
+const entries = getDemos('./demos').reduce((obj, name) => {
+  obj[name] = `./demos/${name}.ts`;
+  return obj;
+}, {});
+
+module.exports = {
+  ...baseConfig,
+  devtool: 'inline-source-map',
+  mode: 'development',
+  entry: {
+    ...entries,
+  },
+  output: {
+    filename: '[name]_bundle.js',
+    path: path.resolve(__dirname, '../demos'),
+  },
+};

music/webpack/lib.config.ts

@@ -0,0 +1,14 @@
+import * as path from 'path';
+
+import {baseConfig} from './base.config';
+
+module.exports = {
+  ...baseConfig,
+  mode: 'production',
+  entry: {
+    magentamusic: './src/lib.ts',
+  },
+  output:
+      {filename: 'magentamusic.js', path: path.resolve(__dirname, '../dist')},
+  optimization: {minimize: true},
+};