https://github.com/kc596/jsgames
Just an experiment
https://github.com/kc596/jsgames
Last synced: 12 months ago
JSON representation
Just an experiment
- Host: GitHub
- URL: https://github.com/kc596/jsgames
- Owner: kc596
- Created: 2020-09-03T14:39:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-14T14:47:45.000Z (almost 6 years ago)
- Last Synced: 2025-04-07T22:42:39.064Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 54.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jsgames
### Game 1
- Prints a starry pattern in console.
n = 7
* * *
* * * * *
* * * * * * *
* * * * * * * * *
* * * * * * * * * * *
* * * * * * * * * * * * *
* * * * * * ** * * * * * * *
* * * * * * * * * * * * * *
* * * * * * * * * * * *
* * * * * * * * * *
* * * * * * * *
* * * * * *
* * * *
* *
### Game 2
- Prints another starry pattern in console. Uses starOrSpace() function from game 1.
n = 7
* * * * * * * * * * * * * *
* * * * * * * * * * * *
* * * * * * * * * *
* * * * * * * *
* * * * * *
* * * *
* *
* *
* * * *
* * * * * *
* * * * * * * *
* * * * * * * * * *
* * * * * * * * * * * *
* * * * * * * * * * * * * *
### Game 3
- Contains utils for shape and area : circle, rectangle, square, right angled triangle
### Game 4
- Contains utils for volume using area (from game 3) : cube(x), sphere(x)
### Game 5
- Uses fast exponent to expose a function pow3() which calculates power of 3
### Game 6
- Uses game 4 to calc hyperCube(x) = cube(x) * x
- Uses game5 pow3() to calc pow9()
- Also uses fastexponent directly to calc pow2()
- Uses game2 to print pattern for n=5
### Game 7
- Snake game
## Babel
The main things Babel can do:
- Transform syntax
- Polyfill features that are missing in your target environment (through @babel/polyfill)
- Source code transformations (codemods)
Babel is a compiler (source code => output code). Like many other compilers it runs in 3 stages: parsing, transforming, and printing.
Now, out of the box Babel doesn't do anything. It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again. You will need to add plugins for Babel to do anything.
Instead of individual plugins, you can also enable a set of plugins in a preset.
> *babel-loader* is used for using babel with webpack build system.
> *@rollup/plugin-babel* is used for using babel with rollup build system.
### Ordering matters for each visitor in the plugin.
This means if two transforms both visit the "Program" node, the transforms will run in either plugin or preset order.
- Plugins run before Presets.
- Plugin ordering is first to last.
- Preset ordering is reversed (last to first).
### @babel/plugin-transform-runtime
Babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when application is spread out over multiple files.
@babel/plugin-transform-runtime plugin makes all of the helpers will reference the module @babel/runtime to avoid duplication across your compiled output. The runtime will be compiled into your build.
Another purpose of this transformer is to create a sandboxed environment for your code. If you directly import core-js or @babel/polyfill and the built-ins it provides such as Promise, Set and Map, those will pollute the global scope.
Examples on size is shown below in table :-
| Plugin | Options | Size (orig./gzip) in B | Time (s) |
| ------ | ------ | ------ | ------ |
| - | - | 69385 / 26890| 2.4 |
| plugin-transform-runtime | default | 54994 / 21806 | 2.1 - 2.2 |
| plugin-transform-runtime | corejs:3 | 82100 / 31239 | 2.8 |
| plugin-transform-runtime | helpers:false | 69408 / 26896 | 2.5 |
| plugin-transform-runtime | regenerator:false | 54969 / 21784 | 2.2 |
| plugin-transform-runtime | useESModules:true | 54667 / 21673 | 2.2 |
### @babel/env preset
Example affect on size of bundle:
**bugfixes: false** : original size: 26912 / gzipped size: 10483
**bugfixes: true** : original size: 26685 / gzipped size: 10454
It is worth pointing out that this reduciton happened when targettig modern browsers.
```js
targets: {
"browsers": [
"Chrome >= 78",
"ChromeAndroid >= 78",
"Firefox >= 69",
"Safari >= 12",
],
}
```
However, same code for older targets had no size reduction in our case. It's because it was mostly replacing concat with new way to include variables in string but *`* character is not supported (illegal) in older browsers.
```js
targets: {
"browsers": [
"Chrome >= 40",
"ChromeAndroid >= 40",
"Firefox >= 40",
"Safari >= 9",
],
}
```
**bugfixes: false** : original size: 54342 / gzipped size: 21551
**bugfixes: true** : original size: 54342 / gzipped size: 21551
*Sample difference caused by this config:*
```
this.el.style.top = "".concat(y, "px"); //bugfix: false
this.el.style.top = `${y}px`; //bugfix: true
```
## Webpack
1. Only updating to Webpack `5.0.0 (beta30)` from `4.41.5` gave little size improvements `~1.5%`
2. ```$js
const experiments = {
"outputModule": true
};
```
And setting `output.module : true` in webpack config gives size improvements of `~1%`.
3. Some problem in tree-shaking is there in webpack.
## Rollup
Rollup can only do tree-shaking on ES modules
## Few unsupported syntax in older browsers
And thus, require polyfills.
- *class* : Firefox 45+, Chrome 49+, Safari 9+. This doesn't require polyfills and are transpiled.
- *Array.prototype.includes*
- *Promise.resolve().finally();*
- *Map*