Some naive questions about ES6 - webpack - npm and best practice

[Heiddo]

tl;dr - I’m confused about 'best practices in regards to ES6, npm, webpack, web hosting. Any guidance, advice or links to up to date learning are much appreciated.

My first three.js project was thrown together with a mixture of cdns - hardcopy master files and script links in my html. The code is a Frankenstein of tutorials and stack answers. It was also my first finished website using Javascript. The optimisation and ‘production readiness’ of what i’ve made would make a lot of smart people here wince in discomfort.

I’m about to start a new project and i’m really eager to do this ‘properly’ - i’m here to find out what that is and clear up some things that are confusing me.

Most of these things relate to my reading this: https://threejs.org/docs/#manual/en/introduction/Import-via-modules

If I use npm to start my project, let’s say i’m starting from scratch and have npm init inside my test folder, I ‘npm install three --save’. I think I understand that If i’m hosting on a server with a node environment, i can then npm install to ‘install’ the project and it’s dependencies on said server (is this correct?). What happens if i’m just using traditional website hosting - do i just copy the node_modules folder over along with all the usual suspects? - this makes me wonder why/if I should be using npm for smaller projects.

If i use ES6 syntax - should i also use Babel to allow it to revert back to ES5 if needed for older browsers? Should I choose to try and use ES6? I haven’t used Babel or ES6 before.

I saw a post here recently that said something like - using things like webpack or browserify were no longer recommended - it had something to do with the adoption of ES6 and removal of the three.js examples in upcoming versions of three. However webpack/browserify are the first two examples used in the three docs when it talks about npm - which also references the examples.

I apologise if this is a bit of a mess. I’m really looking for guidance - even it’s a pointer to somewhere I can find up to date information about things you think i’m getting confused about.

Also - if anyone knows of an up to date boilerplate / example project that shows best practice use of any of these things that would also be appreciated. I got this boilerplate running on my machine - but the client/server and typescript elements of it scare me.

The easiest thing for me to do now, would be download a master copy of three and repeat what I did last time - this doesn’t feel like the correct option.

Thanks to anyone who takes the time to read and/or respond to this. I really love this community and this tool. I’m hoping this uncomfortably naive set of questions will allow me to learn this all a bit quicker.

[mjurczyk]

@Heiddo

The optimisation and ‘production readiness’ of what i’ve made would make a lot of smart people here wince in discomfort.

So does 99% of big corporate projects I’ve seen, wouldn’t stress about it

@Heiddo

I think I understand that If i’m hosting on a server with a node environment, i can then npm install to ‘install’ the project and it’s dependencies on said server (is this correct?).

Technically, yes. But you shouldn’t do this. The best way to do it is to create project locally, collect all dependencies in package.json, push project to github (or similar), fetch it on the server, and use npm install to automatically install all dependencies the project has saved in package.json.

@Heiddo

What happens if i’m just using traditional website hosting

You cannot host node app on website hosting, nor most modern webapps - since they are often not static. A very nice solution to this problem is Gatsby - Gatsby allows you to “bake” your entire project as a static website, which then can be uploaded to a website hosting.

@Heiddo

If i use ES6 syntax - should i also use Babel to allow it to revert back to ES5 if needed for older browsers? Should I choose to try and use ES6? I haven’t used Babel or ES6 before.

Don’t stress about it either, browsers already handle most of the ES5/6 stuff you will use (possibly already used.) Unless you know why you need Babel, just skip it (it often comes with modern frameworks, so if it does, just ignore it.) If you will use it, Babel also has options to support backward compatibility - afair you can tell Babel if it should handle very old browsers, and it will adjust.

@Heiddo

Should I choose to try and use ES6?

Also - yes. It’s just handy these days, though using older JS is not a wrong way either.

@Heiddo

using things like webpack or browserify were no longer recommended

It is recommended and often very necessary to use them in any medium/large projects. Mostly webpack, it’s longer to setup but nice in the long run, browserify got somehow left behind from my experience.

@Heiddo

typescript

If you don’t know ES6 / webpack / npm and other fancy things typescript will just add one more block on your way. If you can - omit it (it’s incredibly useful, but will slow you down since you will also have to learn limitations, bugs, and usage of it on the way.)

• You can learn Webpack here - they have a really nice getting stared guide. But learn just the basics, set it up and forget about it - people use webpack once per project, and most of the configuration options don’t apply anyway, so trying to memorise webpack makes little sense.

• As for npm - there isn’t much to learn. It’s just npm init, npm install [package-name] in the project directory, and then import('package-name') in the code. Webpack guide above shows an example of how to do it.

• Haven’t personally used it, but this boilerplate seems to be exactly what you are looking for?

[Heiddo]

I can’t explain how helpful this all is, thankyou.

Can I just confirm something - If, hypothetically you were required to build a ‘static’ three.js website. Let’s say a 3D experience built to advertise the launch of someones upcoming product. Would you still be using npm to organise your workflow, but just copy the node_modules folder and ‘usual suspects index.html/js stylesheet’ manually to your clients host?

I’m going to spend some time with the boilerplate you found - it looks really cool - let’s see what I learn. Thanks again!

[Mugen87]

@Heiddo

Would you still be using npm to organise your workflow, but just copy the node_modules folder and ‘usual suspects index.html/js stylesheet’ manually to your clients host?

You should never copy node_modules. You should configure a build that bundles your entire JS code in a single file. If you have never used such bundlers before, I suggest you start with rollup.

Some while ago, I’ve provided a minimal project setup for three.js that works quite well. It’s a good foundation that can easily be enhanced e.g. with ES6-ES5 code transpilation.

GitHub - Mugen87/three-jsm: Minimal three.js project setup using ES6 modules...

[Heiddo]

@Mugen87

You should never copy node_modules .

Understood.

Your starter project looks like it could be what i’m looking for. Thankyou!

[Fyrestar]

There isn’t the one best practice/workflow, the way you did your first is ok for smaller things or prototypes, basically at codepen or jsfiddle you do nothing else.

For running nodejs stuff you need more than basic webhosting most time unfortunately, there are only few provider that allow nodejs asides of php but even if then it’s very limited.

Also regarding node modules ^^
<<

[Heiddo]

I think I’ve been confusing nodejs apps, node package manager and how/when they both get used. My dream is to understand the full ‘stack’ where this stuff is concerned, but I appreciate that i’m a little while off.

This time around i’m going to use npm and rollup as recommended - and see if I can successfully get that on my website.

As embarrassing as this is to admit - the reason I first stopped using npm was the upload time of my node_modules over FTP. You live and learn.

[Heiddo]

@Mugen87

Some while ago, I’ve provided a minimal project setup for three.js that works quite well. It’s a good foundation that can easily be enhanced e.g. with ES6-ES5 code transpilation.

Can I confirm something with you, is this statement true?

Rollup ‘bundles’ both the code from the src version of main.js (your cube) AND the relevant code from node_modules into one build version of main.js (using the config file as it’s rule set) - this bundled, built js file contains everything I need to run the website, including the core code of three.js and any other dependencies. (ignoring index.html and css)

I have your boilerplate working on a subdomain of mine: but the above statement would clear up why/how it’s able to run.

---

Next step is customising the src version of main.js and having rollup rebuild the build version ready for upload. I’m having some trouble using rollup watch in relation to the boilerplate - but i’ve asked a question about it on stack as it’s fairly unrelated here.

[Mugen87]

@Heiddo

Rollup ‘bundles’ both the code from the src version of main.js (your cube) AND the relevant code from node_modules into one build version of main.js (using the config file as it’s rule set) - this bundled, built js file contains everything I need to run the website, including the core code of three.js and any other dependencies. (ignoring index.html and css)

That’s right!

[Heiddo]

@Mugen87 I have another question - and I can only apologise because it must feel like having children with the amount of answers you provide on this forum.

Currently my workflow is: write code -> save -> ‘rollup watch’ builds -> npm live-server refreshes

This is great but means 8 seconds of build time each time I save/refresh. Is this a limitation of using/relying on a bundler and the use of .app when using three modules? - or is there a way around it using temporary changes to index.html (remove .app script, link to src/main.js instead of build/main.js), working on ONLY src/main.js and importing using cdns until i’m ready to revert my html, revert module imports, build and deploy?

I post this here as I believe it has something to do with the use of three modules, how they’re imported / linked to and what is and isn’t possible in regard to using ES6, three and in this case also rollup.

I have also asked a related question on stack - althought framed as purely a rollup question there.

[Mugen87]

When using rollup watch, you should definitely not use code minification. For a slightly more advanced build configuration you normally have a dev and prod build. Only the build for production is minified. Usually with a separate command.

[Heiddo]

@Mugen87

For a slightly more advanced build configuration you normally have a dev and prod build. Only the build for production is minified. Usually with a separate command.

Ok I will look at this now. So in both instances, dev and prod - I am relying on a build to complete (just not minified if dev) before live-server can do it’s job and refresh. (compared to just running live server on a non bundled project and seeing almost instant results).

I just want to provide docs that helped me in-case it helps others:

From here:

You can, if you like, specify a different config file from the default: rollup.config.js:

rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js

I removed ‘terser’ from rollup_dev_config.js and now I have unminified dev version.

Thanks again.

[felixmariotto]

I think that a link to a basic project template using a bundler should be sticked in the import-via-modules article of the doc. @Mugen87 your rollup template would be perfect for instance.

[Mugen87]

Good idea. FYI, this guide will be soon replaced with a new one focusing on modules. There will also be a forum post explaining the deprecation of examples/js and CommonJS imports. After that, we can still consider to enhance the new documentation with a sample project for starters. /cc @donmccurdy