DEV Community

loading...

Dear vanilla JavaScript users, which version do you use? Transpiler?

patarapolw profile image Pacharapol Withayasakpunt ・1 min read

This aligns with not only Node version, but also which web browsers do you target.

Do you transpile JavaScript (or something else, like Kotlin) to JavaScript at all?

Also, on Node.js - commonjs or ESM? Commonjs style can be easily used as node index.js or node ., but is running ESM really that more complex, considering Deno is even worse?

node --experimental-modules server.js

# if you want to use Chrome inspector
node --experimental-modules --inspect server.js

# without precompiling with Babel
babel-node server.js

# ts-node that probably will always run
ts-node -O '{"module":"commonjs","noExplicitAny":false}' -r tsconfig-paths/register server.ts

deno --allow-net server.ts
Enter fullscreen mode Exit fullscreen mode

I feel like TypeScript is waging war with JavaScript. If it ever add non-JavaScript compilation target, it would be Embrace, Extend, and Extinguish. So Microsoft-like. I feel like people are forced to choose either.

TypeScript is just a near-zero-config to-JavaScript compiler; with only single-install (and Babel is just the opposite of complexity). Not to mention that Babel is not the only JavaScript compiler.

Also, in VSCode, it is helpful to have jsconfig.json, no matter which JavaScript do you choose.

Discussion (3)

pic
Editor guide
Collapse
conradsollitt profile image
Conrad Sollitt

For Vanilla JavaScript I just minimize if no build is required and I use Terser for Modern Code and `uglify-js' for ES5 code.

Here is an example I wrote (fully custom script) that handles 3 types of code:

  • Web Components (Modern JS) - Using Terser, minification only
  • React Components
    • Terser to minimize build targetting modern browsers
    • Babel Standalone (smaller version of babel intended for Brwoser) to target older browers
    • uglify-js to minify ES5 code in the project

With the custom script I simply run npm run build and it created *.min.js of each file and handles the React Components. This is a large project though so I think this would be overkill for the vast majority of projects, but individual parts of it can apply to many projects.

github.com/dataformsjs/dataformsjs...

Collapse
dabjazz profile image
Yash_Jaiswal

Dart for web.....Dart2js

Collapse
patarapolw profile image
Pacharapol Withayasakpunt Author

Vanilla? Not AngularDart or Overreact?