Skip to content

Commit 8945ab0

Browse files
oveddanoveddan
committed
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
1 parent f35dcad commit 8945ab0

File tree

8 files changed

+11772
-115
lines changed

8 files changed

+11772
-115
lines changed

‎CONTRIBUTING.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ npm install
2626

2727
Run this command from the root of the project:
2828
```bash
29-
npm run start:dev
29+
npm run start
3030
```
3131

3232
Will output something like this:
3333

3434
```bash
3535
Project is running at http://localhost:8080/
36-
webpack output is served from /dist/
36+
webpack output is served from /
3737

3838
Hash: 16b80528bf532975b279
3939
Version: webpack 2.6.1
@@ -71,7 +71,7 @@ Create a new folder called `/experiments` in the project's root folder. Create a
7171
<html>
7272
<head>
7373
<title>Test</title>
74-
<script src="../../dist/ml5.js"></script>
74+
<script src="http://localhost:8080/ml5.js"></script>
7575
</head>
7676
<body>
7777

@@ -109,11 +109,11 @@ Create a new folder called `/experiments` in the project's root folder. Create a
109109
That should output something very similar to the `webpack-dev-server` but you'll notice that at the end is this line:
110110

111111
```bash
112-
> [email protected] build:min /Users/ml5/Desktop/sandbox/ml5
113-
> uglifyjs dist/ml5.js -o dist/ml5.min.js
112+
> webpack --config webpack.prod.babel.js
113+
> Done in 15.13s.
114114
```
115115

116-
Which means the library was successfully build and minified.
116+
Which means the library was successfully built and minified.
117117

118118
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:
119119

‎dist/ml5.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,8 @@
1010
"scripts": {
1111
"commit": "git-cz",
1212
"prebuild": "rimraf dist",
13-
"start:dev": "webpack-dev-server --mode development --watch-content-base --open",
14-
"build": "npm-run-all build:*",
15-
"build:main": "webpack --output-filename ml5.js",
16-
"build:min": "uglifyjs dist/ml5.js -o dist/ml5.min.js",
13+
"start": "webpack-dev-server --open --config webpack.dev.babel.js",
14+
"build": "webpack --config webpack.prod.babel.js",
1715
"test:dev": "./node_modules/karma/bin/karma start karma.conf.js",
1816
"test": "./node_modules/karma/bin/karma start karma.conf.js --no-auto-watch --single-run"
1917
},
@@ -34,11 +32,10 @@
3432
"babel-cli": "6.26.0",
3533
"babel-core": "6.26.0",
3634
"babel-loader": "7.1.4",
37-
"babel-plugin-transform-async-to-generator": "6.24.1",
35+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
36+
"babel-plugin-transform-runtime": "^6.23.0",
3837
"babel-polyfill": "6.26.0",
3938
"babel-preset-env": "1.6.1",
40-
"babel-preset-es2015": "6.24.1",
41-
"babel-preset-stage-2": "6.24.1",
4239
"babel-register": "6.26.0",
4340
"commitizen": "2.9.6",
4441
"cz-conventional-changelog": "2.1.0",
@@ -48,6 +45,7 @@
4845
"eslint-plugin-import": "2.9.0",
4946
"extract-text-webpack-plugin": "4.0.0-beta.0",
5047
"ghooks": "2.0.2",
48+
"html-webpack-plugin": "^3.0.7",
5149
"jasmine-core": "3.1.0",
5250
"karma": "2.0.0",
5351
"karma-chrome-launcher": "2.2.0",
@@ -59,10 +57,11 @@
5957
"regenerator-runtime": "0.11.1",
6058
"rimraf": "2.6.2",
6159
"semantic-release": "15.0.2",
62-
"uglify-es": "3.3.9",
60+
"uglifyjs-webpack-plugin": "^1.2.5",
6361
"webpack": "4.1.1",
6462
"webpack-cli": "2.0.10",
65-
"webpack-dev-server": "3.1.0"
63+
"webpack-dev-server": "3.1.0",
64+
"webpack-merge": "^4.1.2"
6665
},
6766
"config": {
6867
"commitizen": {
@@ -75,16 +74,17 @@
7574
],
7675
"babel": {
7776
"presets": [
78-
"env",
79-
"es2015",
80-
"stage-2"
77+
[
78+
"env"
79+
]
8180
],
8281
"plugins": [
83-
"transform-async-to-generator"
82+
"transform-runtime",
83+
"transform-object-rest-spread"
8484
]
8585
},
8686
"dependencies": {
87-
"@tensorflow-models/posenet": "0.0.1",
87+
"@tensorflow-models/posenet": "^0.1.1",
8888
"@tensorflow/tfjs": "0.11.4"
8989
}
9090
}

‎webpack.config.babel.js‎ renamed to ‎webpack.common.babel.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
// This software is released under the MIT License.
44
// https://opensource.org/licenses/MIT
55

6-
import { join } from 'path';
6+
import { join, resolve } from 'path';
77

88
const include = join(__dirname, 'src');
99

1010
export default {
1111
entry: ['babel-polyfill', './src/index.js'],
1212
output: {
13-
path: join(__dirname, 'dist'),
13+
path: resolve(__dirname, 'dist'),
14+
publicPath: '/',
1415
libraryTarget: 'umd',
15-
publicPath: '/dist/',
1616
filename: 'ml5.js',
1717
library: 'ml5',
1818
},
@@ -30,5 +30,5 @@ export default {
3030
include,
3131
},
3232
],
33-
},
33+
}
3434
};

‎webpack.dev.babel.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Copyright (c) 2018 ml5
2+
//
3+
// This software is released under the MIT License.
4+
// https://opensource.org/licenses/MIT
5+
6+
import { join } from 'path';
7+
import merge from 'webpack-merge';
8+
import common from './webpack.common.babel';
9+
import HtmlWebpackPlugin from 'html-webpack-plugin';
10+
11+
export default merge(common, {
12+
mode: 'development',
13+
devtool: 'inline-source-map',
14+
devServer: {
15+
watchContentBase: true,
16+
contentBase: join(__dirname, './dist')
17+
},
18+
plugins: [
19+
new HtmlWebpackPlugin({
20+
title: 'ml5'
21+
})
22+
]
23+
})

‎webpack.prod.babel.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Copyright (c) 2018 ml5
2+
//
3+
// This software is released under the MIT License.
4+
// https://opensource.org/licenses/MIT
5+
6+
import merge from 'webpack-merge';
7+
import common from './webpack.common.babel';
8+
import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
9+
10+
export default merge(common, {
11+
mode: 'production',
12+
devtool: 'source-map',
13+
output: {
14+
filename: 'ml5.min.js'
15+
},
16+
plugins: [
17+
new UglifyJSPlugin({
18+
sourceMap: true
19+
})
20+
]
21+
})

0 commit comments

Comments
 (0)