To build

To build the dist/bundle.js, using the package.json info, you would just do the following two steps:

npm install
npm run build

This is typical of how many web tools are packaged today. Even though we use the node package manager, the output is for running in a web browser (not node). But the node ecosystem is used for packages and for tools to "bundle" the code into a form usable in a browser.

Open hello.html.

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 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.

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. It's very close the example given on the webpack page.

Check out the source file. 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