You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.6 KiB
Markdown
72 lines
2.6 KiB
Markdown
|
|
== To build ==
|
|
|
|
npm install
|
|
npm run build
|
|
|
|
|
|
== How these files were created (tutorial) ==
|
|
|
|
To go through the full process, rm the package.json and regenerate it with:
|
|
|
|
npm init -y
|
|
|
|
This makes an empty [package.json](package.json) in this directory. When you install with npm install --save, the names of packages get added to "dependencies" in this file, so that later you can just "npm install" to reinstall all the dependencies (it's like pip + requirements.txt if that sounds familiar).
|
|
|
|
First install three js with npm, following <https://threejs.org/docs/#manual/en/introduction/Installation>
|
|
|
|
npm install --save three
|
|
|
|
**npm** will create an add the files to node_modules/ folder. Check it out:
|
|
|
|
ls node_modules
|
|
|
|
(nb you may sometimes see: **npm i** instead of npm install, it's the same)
|
|
|
|
Install the special orbitcontrols package, following <https://github.com/jameshsu1125/lesca-threejs-orbitcontrols>
|
|
|
|
npm install lesca-threejs-orbitcontrols --save
|
|
|
|
|
|
Use webpack to create a browser friendly "bundle", following [the webpack docs](https://webpack.js.org/).
|
|
|
|
|
|
npm install --save webpack webpack-cli
|
|
|
|
Note how installing webpack pulls in a bunch of other packages that it relies on (look in node_modules now!). The extra files don't matter though, when you make your "distributable" output it will only have stuff that your final code needs. You don't need to copy the node_modules folder (it's only used for development). Check out the [webpack config file](webpack.config.js). It's very close the example given on the [webpack page](https://webpack.js.org/#bundle-it).
|
|
|
|
Check out the [source file](src/hello.js). Then finally, use webpack to translate your src file (and it's dependencies) into an output "dist" (distributable) file:
|
|
|
|
npx webpack
|
|
|
|
NB: The command is **npx** and it means run the webpack program that's in the node_modules/bin.
|
|
|
|
By default webpack uses the webpack.config.js file to figure out what the "entry" point of the code is (src/hello.js), and where to put the output.
|
|
|
|
Look at hello.html (which uses dist/bundle.js).
|
|
|
|
**Each time you change src/hello.js you need to run npx webpack to rebundle/rebuild the output.**
|
|
|
|
Eventually you can set the mode option to "production" to make the output smaller (takes more time though to build it and debugging might be harder when there are bugs).
|
|
|
|
``
|
|
entry: './src/hello.js',
|
|
mode: 'production',
|
|
```
|
|
Also if you want to do it like other projects, you can add your "build command" to the package.json like this:
|
|
|
|
```
|
|
...
|
|
"main": "webpack.config.js",
|
|
"scripts": {
|
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
"build": "webpack"
|
|
},
|
|
...
|
|
}
|
|
```
|
|
|
|
Then you can:
|
|
|
|
npm run build
|