ESM (ES6 Modules) Bundlerless Front-end Development tool
This project provides a basic concept and a minimal prototype with React.
It's recommended to read https://github.com/kenokabe/esm-bundlerless for the most simple project without React prior to this article.
ES6 Modules support in modern browsers today
- TypeScript 3.0
Amazingly TypeScript has an ability to transpile JSX(TSX) to JS. Hence, as long as sticking to TypeScript, another transpiler such as babel is not necessary.
- Electron 3.0
Electron is built on Chromium and Node.js technology, so it's a hybrid environment of both web browser and local node runtime.
Therefore, with Electron, I presume anything can be done, however, the fact is there is some issue to take advantage of ESM - Issue: Contexts: supporting new Node's ESM Loader (without hacking)
While I commented there, the member of the team of Electron and the developer of lodash replied on me to suggest to use esm library that is his another brilliant work, and that technically resolved the issue.
- Visual Studio Code
I highly recommend using Visual Studio Code than any other IDE including AtomEditor(by GitHub).
VisualStudio code is optimized to use TypeScript out of the box, and in fact, VisualStudio Code is purely developed in TypeScript(Anders Hejlsberg explained so in some Microsoft keynote.)
VisualStudio Code is developed by Microsoft and build on Electron, and it's one of the reasons Microsoft acquired GitHub. Electron is originally a core unit of AtomEditor developed by GitHub, so essentially, Electron is now Microsoft's asset.
Very interestingly, all tools, TypeScript, Electron and VisualStudio Code are maintained by Microsoft.
The most of the work is done by TypeScript transpiler tsc --watch option
Run the compiler in watch mode. Watch input files and trigger recompilation on changes. The implementation of watching files and directories can be configured using environment variable. See configuring watch for more details.
This tool adds the
.js file extension to the end of module specifiers in TypeScript transpile
This tool maps the npm library to the ESM path in TypeScript transpile
Since React developers currently depend on webpack/browserify. React16.* has not released ESM version, but probably in ver17, so I obtained ESM version by myself.
React npm packages are necessary either way because TypeScript @types needs them.
On deployment, the npm dependency should be replaced to the native esm react modules, so here we need to map the ESM path.
TypeScript transpile process does not support this maping feature. See:
Automatic reload and clean console log in a child window of Electron
dist directory with
index.html can be exported and it should work on modern browsers.
Firefox should be able to run the local
dist/index.html file directly with no problem, Chrome generates an error with a security issue.
## Use the latest TypeScript version installed in the local project not global
It's a good manner to install typescript npm package
- not to global
npm install -g typescript
- but to local --save-dev.
npm install -D typescript
In VisualStudio Code, by clicking the TypeScript Version, it's easy to switch to use the project local(WorkSpace) installed version.