# I Made an ES6 Typescript and Parcel template for others to fork

**URL:** <https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379>\
**Category:** p5.js\
**Created:** [May 3, 2024, 7:45pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379 "2024-05-03T19:45:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ehonzik](https://avatars.discourse-cdn.com/v4/letter/e/a87d85/32.png) [@ehonzik](https://discourse.processing.org/u/ehonzik)\
**Post date:** [May 3, 2024, 7:45pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379/1 "2024-05-03T19:45:12Z")

</div>

Hi all, recently I’ve gotten into p5js and have been really enjoying it. Thing is, I don’t come from a web development background. I’m used to languages like C# and Go with all of the built in intellisense, tooling, and package managers. Moving from this to JavaScript was painful.

However, Typescript offers a solution to this problem. It adds type safety, built in documentation, and better auto complete / intellisense. I don’t think its an understatement to say my productivity has improved by at least a factor of 3 since using it.

Getting P5 up and running in a TypeScript environment that supports es6 imports for use with npm was a surprisingly difficult undertaking for me. So I figured I could share what I’ve come up with as a resource for anyone else looking to do the same.

[https://github.com/Ethan-C-Honzik/P5-Typescript-Parcel-Template](https://github.com/Ethan-C-Honzik/P5-Typescript-Parcel-Template)

Also if anyone has any feedback on the template I’d be happy to hear it. I’m not really a web developer so its possible I’ve made some sub-optimal decisions.

---

<div class="post-metadata">

**Author:** ![alptugan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alptugan/32/19406_2.png) [@alptugan](https://discourse.processing.org/u/alptugan)\
**Post date:** [May 4, 2024, 1:33pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379/2 "2024-05-04T13:33:31Z")

</div>

Thank you for sharing the repository! While experienced users may find it straightforward, novice programmers may find it a bit challenging.

I think, one downside of npm is that it requires a lot of disk space, which can be unsustainable. Even though all the magic happens in just 1-3kb of js file, npm makes it huge like 300-400 Mb.

Perhaps, you can create a tutorial that shows how to install dependencies globally to the system, which will help to deal with unnecessary disk space as an option. Personally, I prefer using global packages as they make things easier to create new projects and reduce the amount of disk space required.

I like the following feature. It would be good to point users to a tutorial on how to publish Github pages.

> …start a github pages site pointing to the dist folder.

This is also handy niche feature;

> If you want this repo to be a nested page in a website npm start\_nested will use relative paths for all assets.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 4, 2024, 4:12pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379/3 "2024-05-04T16:12:01Z")

</div>

> [@alptugan](#):
>
> one downside of npm is that it requires a lot of disk space

You might want to look into package managers such as [pnpm](https://pnpm.io/)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 4, 2024, 5:03pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379/4 "2024-05-04T17:03:58Z")

</div>

If we already have [Node.js](https://nodejs.org) installed, we can globally install [pnpm](https://pnpm.io) using a terminal typing in this:  
npm -g i pnpm

In Windows, the pnpm package will be installed at: `%AppData%\npm\node_modules\pnpm\`

And its entry point will be this file: `%AppData%\npm\npm.cmd`

Alternatively we can install pnpm as a standalone app:

> **[Installation | pnpm](https://pnpm.io/installation#on-windows)**
>
> Prerequisites

Which I believe it’ll be installed in this path: `%UserProfile%\.pnpm\`

BtW, here’s a video explaining how pnpm is much better than npm for installing local packages:

[![](https://img.youtube.com/vi/ZIKDJBrk56k/maxresdefault.jpg "I Finally Changed Package Managers") ](https://www.youtube.com/watch?v=ZIKDJBrk56k)

---

<div class="post-metadata">

**Author:** ![alptugan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alptugan/32/19406_2.png) [@alptugan](https://discourse.processing.org/u/alptugan)\
**Post date:** [May 4, 2024, 5:46pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379/5 "2024-05-04T17:46:02Z")

</div>

@micuat, @GoToLoop, I had problems before using pnpm in a project that also includes parcel. I’ll check again to see if the conflicts have been resolved.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 5, 2024, 3:26pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379/6 "2024-05-05T15:26:04Z")

</div>

Node.JS package manager pnpm’s page also mentions an installation option via [corepack](https://nodejs.org/api/corepack.html):

> **[Installation | pnpm](https://pnpm.io/installation#using-corepack)**
>
> Prerequisites

I did an experiment by also installing pnpm globally by typing this in a terminal:  
corepack install -g pnpm

Installation path: `%LocalAppData%\node\corepack\v1\pnpm\`  
Entry point: `%ProgramFiles%\nodejs\node_modules\corepack\shims\pnpm.cmd`

---

<div class="post-metadata">

**Author:** ![ehonzik](https://avatars.discourse-cdn.com/v4/letter/e/a87d85/32.png) [@ehonzik](https://discourse.processing.org/u/ehonzik)\
**Post date:** [May 6, 2024, 5:35pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379/7 "2024-05-06T17:35:34Z")

</div>

While a bit annoying I’ve never personally found the node\_modules size to be much of an issue. Storage is cheap and the benefits of a package manager far outweigh the cost, at least to me. But like other’s have pointed out, pnpm should be a drop in replacement that more intelligently handles storage. Though I’ve never personally tried it.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 6, 2024, 6:40pm UTC](https://discourse.processing.org/t/i-made-an-es6-typescript-and-parcel-template-for-others-to-fork/44379/8 "2024-05-06T18:40:43Z")

</div>

> [@ehonzik](#):
>
> … I’ve never personally found the node\_modules size to be much of an issue.

Each single challenge folder from this repo installs relatively big-sized “node\_modules” folders:

> **[Exercism/javascript at main · GoToLoop/Exercism](https://github.com/GoToLoop/Exercism/tree/main/javascript)**
>
> My code challenge solutions for Exercism.org. Contribute to GoToLoop/Exercism development by creating an account on GitHub.

Each 1 of those “node\_modules” folders contain 1977 subfolders w/ 17820 files inside!

Total size for each “node\_modules” is 47.5 MB, but occupies 65.5 MB of disk.

So far I’ve got 75 [Exercism.org](http://Exercism.org) challenges done, which is 65.5 MB x 25 = 1637 MB of disk!

It doesn’t seem that much, but still, b/c pnpm uses hardlinks & junctions, no matter how many new challenge folders I add, each 1 is gonna re-use those same 17820 files rather than re-creating them!