node/npm acts as build tool
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
need a bundler to build src code compatible with browser, we'll use vite bc its recommended
npm create vite@latest
use typescript
npm install typescript
npm run build
lol this is not the typescript you are looking for: https://stackoverflow.com/questions/67677320/this-is-not-the-tsc-command-you-are-looking-for
npm uninstall -g tsc
npm uninstall tsc
npm install -D typescript (-d is short for --save-dev development dependences that are only used during development)
In the context of npm install -D, the -D flag is shorthand for --save-dev. This flag tells npm to install a package as a development dependency rather than a regular dependency.
--save-dev/-D: When you use this flag, npm adds the package to thedevDependenciessection of yourpackage.json. This is typically used for packages that are needed only during development (like testing frameworks, build tools, linters, etc.), but not in production.
For example:
npm install --save-dev webpackor equivalently:
npm install -D webpackThis would install webpack and save it in your devDependencies, meaning it's not required in a production environment.
- Without
-D: If you install a package without the-Dflag, npm will add it to thedependenciessection, meaning it's a package that your project needs to run, both in development and production.
Let me know if you need further clarification!
output will be in public
see difference between import and require
- https://medium.com/@ebojacky/all-you-need-to-know-about-module-importation-for-back-end-and-front-end-development-in-js-bbc51301ffa8
- https://fredriccliver.medium.com/how-can-i-use-an-npm-module-in-front-end-javascript-63d54d53c005)
in vite
/*see: https://vite.dev/config/*/
export default {
// generate source maps for debugging
build: {
// inline = the sourcemap will be appended to resulting output file as a data URI
sourcemap: 'inline'
}
}generate source maps
- https://www.reddit.com/r/learnjavascript/comments/v14nl5/how_to_debug_js_while_using_webpack/
- https://vite.dev/config/build-options.html
- https://www.aemvite.dev/guide/front-end/vite/
In typescript if a file is declared and not read prepend a _