Enabling source maps and fine tuned webpack config.

* Created dev and prod webpack config, by following the conventions in https://webpack.js.org/guides/production/ * For dev config, using eval source map. * For prod config, uglifying and doing a standard sourcemap. * Since we have a ml5.min.js and sourcemap, there is no longer a near for ml5.js * Changed the watch task to be yarn start updated to posenet latest version, which has an es6 dist to enable better viewing of the source code updated contributing to reflect new build process
ml5js · Jun 7, 2018 · 27ec7d9 · 27ec7d9
1 parent c4d1edb
commit 27ec7d9
Show file tree

Hide file tree

Showing 10 changed files with 11,775 additions and 116 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -26,14 +26,14 @@ npm install
 
  Run this command from the root of the project: 
  ```bash
- npm run start:dev
+ npm run start
  ```
 
  Will output something like this:
 
  ```bash
  Project is running at https://localhost:8080/
- webpack output is served from /dist/
+ webpack output is served from /
 
  Hash: 16b80528bf532975b279
  Version: webpack 2.6.1
@@ -71,7 +71,7 @@ Create a new folder called `/experiments` in the project's root folder. Create a
  <html>
  <head>
  <title>Test</title>
- <script src="../../dist/ml5.js"></script>
+ <script src="https://localhost:8080/ml5.js"></script>
  </head>
  <body>
 
@@ -109,11 +109,11 @@ Create a new folder called `/experiments` in the project's root folder. Create a
  That should output something very similar to the `webpack-dev-server` but you'll notice that at the end is this line:
 
  ```bash
- > [email protected] build:min /Users/ml5/Desktop/sandbox/ml5
- > uglifyjs dist/ml5.js -o dist/ml5.min.js
+ > webpack --config webpack.prod.babel.js
+ > Done in 15.13s.
  ```
 
- Which means the library was successfully build and minified.
+ Which means the library was successfully built and minified.
 
  6. (OPTIONAL) Commit your changes. We are using [commitizen](https://github.com/commitizen/cz-cli) to commit changes. Commitizen is a tool that allows you to specify commit in a more precise way. You can run it instead of your regular `git commit -m 'msg'` with:
 

diff --git a/dist/ml5.js b/dist/ml5.js
diff --git a/dist/ml5.min.js b/dist/ml5.min.js
diff --git a/dist/ml5.min.js.map b/dist/ml5.min.js.map
diff --git a/package.json b/package.json
@@ -10,10 +10,8 @@
  "scripts": {
  "commit": "git-cz",
  "prebuild": "rimraf dist",
- "start:dev": "webpack-dev-server --mode development --watch-content-base --open",
- "build": "npm-run-all build:*",
- "build:main": "webpack --output-filename ml5.js",
- "build:min": "uglifyjs dist/ml5.js -o dist/ml5.min.js",
+ "start": "webpack-dev-server --open --config webpack.dev.babel.js",
+ "build": "webpack --config webpack.prod.babel.js",
  "test:dev": "./node_modules/karma/bin/karma start karma.conf.js",
  "test": "./node_modules/karma/bin/karma start karma.conf.js --no-auto-watch --single-run"
  },
@@ -34,11 +32,10 @@
  "babel-cli": "6.26.0",
  "babel-core": "6.26.0",
  "babel-loader": "7.1.4",
- "babel-plugin-transform-async-to-generator": "6.24.1",
+ "babel-plugin-transform-object-rest-spread": "^6.26.0",
+ "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "6.26.0",
  "babel-preset-env": "1.6.1",
- "babel-preset-es2015": "6.24.1",
- "babel-preset-stage-2": "6.24.1",
  "babel-register": "6.26.0",
  "commitizen": "2.9.6",
  "cz-conventional-changelog": "2.1.0",
@@ -48,6 +45,7 @@
  "eslint-plugin-import": "2.9.0",
  "extract-text-webpack-plugin": "4.0.0-beta.0",
  "ghooks": "2.0.2",
+ "html-webpack-plugin": "^3.0.7",
  "jasmine-core": "3.1.0",
  "karma": "2.0.0",
  "karma-chrome-launcher": "2.2.0",
@@ -59,10 +57,11 @@
  "regenerator-runtime": "0.11.1",
  "rimraf": "2.6.2",
  "semantic-release": "15.0.2",
- "uglify-es": "3.3.9",
+ "uglifyjs-webpack-plugin": "^1.2.5",
  "webpack": "4.1.1",
  "webpack-cli": "2.0.10",
- "webpack-dev-server": "3.1.0"
+ "webpack-dev-server": "3.1.0",
+ "webpack-merge": "^4.1.2"
  },
  "config": {
  "commitizen": {
@@ -75,16 +74,17 @@
  ],
  "babel": {
  "presets": [
- "env",
- "es2015",
- "stage-2"
+ [
+  "env"
+ ]
  ],
  "plugins": [
- "transform-async-to-generator"
+ "transform-runtime",
+ "transform-object-rest-spread"
  ]
  },
  "dependencies": {
- "@tensorflow-models/posenet": "0.0.1",
+ "@tensorflow-models/posenet": "^0.1.1",
  "@tensorflow/tfjs": "0.11.4"
  }
 }
diff --git a/webpack.config.babel.js → webpack.common.babel.js b/webpack.config.babel.js → webpack.common.babel.js
@@ -3,16 +3,16 @@
 // This software is released under the MIT License.
 // https://opensource.org/licenses/MIT
 
-import { join } from 'path';
+import { join, resolve } from 'path';
 
 const include = join(__dirname, 'src');
 
 export default {
  entry: ['babel-polyfill', './src/index.js'],
  output: {
- path: join(__dirname, 'dist'),
+ path: resolve(__dirname, 'dist'),
+ publicPath: '/',
  libraryTarget: 'umd',
- publicPath: '/dist/',
  filename: 'ml5.js',
  library: 'ml5',
  },
@@ -30,5 +30,5 @@ export default {
  include,
  },
  ],
- },
+ }
 };
diff --git a/webpack.dev.babel.js b/webpack.dev.babel.js
@@ -0,0 +1,23 @@
+// Copyright (c) 2018 ml5
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+import { join } from 'path';
+import merge from 'webpack-merge';
+import common from './webpack.common.babel';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+export default merge(common, {
+ mode: 'development',
+ devtool: 'inline-source-map',
+ devServer: {
+ watchContentBase: true,
+ contentBase: join(__dirname, './dist')
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'ml5'
+ })
+ ]
+})
diff --git a/webpack.prod.babel.js b/webpack.prod.babel.js
@@ -0,0 +1,21 @@
+// Copyright (c) 2018 ml5
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+import merge from 'webpack-merge';
+import common from './webpack.common.babel';
+import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
+
+export default merge(common, {
+ mode: 'production',
+ devtool: 'source-map',
+ output: {
+ filename: 'ml5.min.js'
+ },
+ plugins: [
+ new UglifyJSPlugin({
+ sourceMap: true
+ })
+ ]
+})