You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
3. This project is developed using [webpack](https://webpack.js.org/). Webpack is a module bundler that allows to "bundle" different files into one file. This allows you to write files for specific things and then mix them all together into one single file that you can import in your page.
22
-
23
-
Under the `/src` folder you will see that there are sub-folders for all ml5 methods. You can edit each file individually and then `build` everything into one single library.
24
-
25
-
Before `building` the library you can see if everything is working.
[515] multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js 52 bytes {0} [built]
59
-
+ 501 hidden modules
60
-
webpack: Compiled successfully.
17
+
cd ml5-library
18
+
npm install
61
19
```
62
20
63
-
This means the project is actively being 'build' when you change any of the files in the `/src` folder. Any change you make to any file in the `/src` folder will rebuild the `ml5.js` and the `ml5.min.js` libraries.
64
-
65
-
4. Develop!
66
-
67
-
Create a new folder called `/experiments` in the project's root folder. Create an `index.html` file and add the following:
21
+
3. This project is developed using [Webpack](https://webpack.js.org/). Webpack is a module bundler that "bundles" different files into one file. This file is usually called a library.
22
+
23
+
Under the `/src` folder there are sub-folders for all `ml5` methods. Before building the library, you can check to see everything is working:
[515] multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js 52 bytes {0} [built]
57
+
+ 501 hidden modules
58
+
webpack: Compiled successfully.
59
+
```
60
+
61
+
If you see this message, it means the project is actively being built by Webpack's `webpack-dev-server`. Any changes you make to any file in the `/src` folder will automatically rebuild the `ml5.js` and `ml5.min.js` libraries as long as the server continues to run.
62
+
63
+
4. Develop!
64
+
65
+
Create a new folder called `/experiments` in the project's root folder. Create an `index.html` file inside `/experiments` and add the following:
68
66
69
67
```html
70
68
<!DOCTYPE html>
@@ -83,45 +81,39 @@ Create a new folder called `/experiments` in the project's root folder. Create a
83
81
</html>
84
82
```
85
83
86
-
This is just a simple `html` file that has a reference to the `ml5` library.
84
+
This is just a simple `html` file that has a reference to the `ml5` library.
87
85
88
-
Now open the file `/src/index.js` and modify the first lines:
86
+
Next, open the `/src/index.js`file and add this after the last line:
89
87
90
88
```javascript
91
-
'use strict';
92
-
console.log('ml5 loaded');
93
-
```
94
-
95
-
To something like this:
96
-
97
-
```javascript
98
-
'use strict';
99
89
console.log('Hello Test Development!');
100
90
```
101
91
102
-
If you now go to `http://localhost:8080/experiments/index.html` and open the console, you should see `Hello Test Development!`. Now try changing any other file. Webpack will rebuild the library for you. So if you reload the `index.html` page you should see your changes.
92
+
If you now go to `http://localhost:8080/` and open the console, you should see `Hello Test Development!`. As you make changes, you will simply need to reload the `index.html` page to see them.
93
+
94
+
5. Once you have finished testing, you can build the library. Just close the `webpack-dev-server` and run
103
95
104
-
5. Once you have test it, you can build the library. Just close the `webpack-dev-server` and run
105
96
```bash
106
97
npm run build
107
98
```
108
99
109
-
That should output something very similar to the `webpack-dev-server` but you'll notice that at the end is this line:
100
+
That should output something very similar to the `webpack-dev-server`from step 3 but you'll notice at the end is this line:
110
101
111
102
```bash
112
103
> webpack --config webpack.prod.babel.js
113
104
> Done in 15.13s.
114
105
```
115
106
116
-
Which means the library was successfully built and minified.
107
+
If you see this, it means the library was successfully built and minified.
108
+
117
109
118
-
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:
110
+
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 commits in a more precise way. You can run it instead of your regular `git commit -m 'msg'` with:
119
111
120
112
```bash
121
113
npm run commit
122
114
```
123
115
124
-
That will show you an interactive prompt to commit:
116
+
That will show you an interactive prompt to commit:
125
117
```bash
126
118
? Select the type of change that you're committing: (Use arrow keys)
127
119
❯ feat: A new feature
@@ -135,7 +127,7 @@ Create a new folder called `/experiments` in the project's root folder. Create a
135
127
136
128
Just be sure to add files before running commitizen!
137
129
138
-
7. Push your code and make a Pull Request!
130
+
7.(OPTIONAL) Push your code and submit a Pull Request!
0 commit comments