This article walks through custom JavaScript packages and how to add them to your project. Specifically, it will guide you through adding ThreeJS into your project.
SpringBot uses Angular as its client-side framework, which in turn makes use of NodeJS and NPM. Dependencies can be added to Angular project via package.json
, which is a configuration file that informs NPM what and how to install packages from the NPM registry.
File name: package.json
Relative Path: clientside/package.json
Purpose: This file holds various metadata relevant to the project and dependency handling.
Implementation
Task: Add ThreeJS as a new custom package into your Angular project.
You will be required to interact with the following files to complete this task.
File Name | Description |
---|---|
package.json | Where we will install our new library |
- Open
package.json
located atclientside/package.json
-
Locate the following code block:
"//": [ " protected region % [Add custom development dependencies here] off begin " ],
- Turn on the protected region by replacing
off begin
withon begin
-
Add these lines below the code block:
"@minininja/threejs": "^1.0.5", "three.js": "^0.77.1",
These version numbers are the latest at the time of writing. Your versions may vary.
-
Your
package.json
should now look like this:... "//": [ " protected region % [Add custom development dependencies here] off begin " ], "@minininja/threejs": "^1.0.5", "three.js": "^0.77.1", ...
- Open a new terminal and navigate to
clientside
. - Run
npm install --no-save
. - You are now able to use ThreeJS in your application code.
Warnings
There are a few things to be careful of when adding a new custom package:
- Running
npm install <package name>
can cause unexpected behaviour with protected regions, such as clearing them. Instead, add the package manually via the steps outlined in this article. This also applies tonpm install --save-dev <package name>
. - Package versions as outlined in the
package.json
file are officially supported. Thus any modification to these versions may cause unexpected bugs or errors due to version or dependency conflicts. Instead, try updating your bot version to get the latest versions. - Due to some limitations of the bot, protected regions in JSON files come in blocks instead of lines like other file types. As such, any modification must be made below the block as outlined in Step 4 of this article.