···11-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
22-// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
33-{
44- "name": "Node.js & TypeScript",
55- // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
66- "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
77-88- // Features to add to the dev container. More info: https://containers.dev/features.
99- "features": {
1010- "ghcr.io/devcontainers/features/git:1": {}
1111- },
1212-1313- // Use 'forwardPorts' to make a list of ports inside the container available locally.
1414- // "forwardPorts": [],
1515-1616- // Use 'postCreateCommand' to run commands after the container is created.
1717- "postCreateCommand": "npm install",
1818-1919- // Configure tool-specific properties.
2020- "customizations": {
2121- "vscode": {
2222- "extensions": [
2323- "christian-kohler.npm-intellisense",
2424- "EditorConfig.EditorConfig",
2525- "jasonnutter.search-node-modules",
2626- "ms-vscode.js-debug-nightly",
2727- "ms-vscode.vscode-typescript-next",
2828- "yzhang.markdown-all-in-one"
2929- ]
3030- }
3131- }
3232-3333- // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
3434- // "remoteUser": "root"
3535-}
···11-# nodecitylights/ecosystem
11+# nc-js/ecosystem
2233[](https://opensource.org/licenses/MIT)
44[](https://github.com/neoncitylights/js-eco/blob/main/.github/workflows/node.yml)
5566-76A comparison of tools within the JS ecosystem. It aims to compare/evaluate the following:
77+88- How the JavaScript ecosystem evolves over time
99-- The most reasonable, minimal configuration setup for a given toolchain
99+- A reasonable, minimal configuration setup for a given toolchain
1010- Compile & transpilation time
1111- Compression/minification of code, compression time
1212-- For applications: Hot module reloading (HMR) time
1212+13131414## Develop locally
15151616```shell
1717-git clone https://github.com/neoncitylights/js-eco.git
1717+git clone https://github.com/nc-js/ecosystem.git
1818cd js-eco
1919-npm install --save-exact --save-dev
2020-npm run build
1919+pnpm install
2020+pnpm run build
2121```
22222323## Structure
24242525At the moment, the top-level directories include:
26262727-- `/tests/unit/`: Comparison of unit testing frameworks
2828-- `/tests/e2e/`: Comparison of e2e testing frameworks
2927- `/libs`: Comparison of build tools for creating distributable libraries
3030-- `/apps`: Comparison of web frameworks for creating web applications
3131-- `/fmtlint`: Comparison of formatting and linting tools
32283329Each subdirectory name in the repository generally follows the naming convention below:
3430···4036- `{{tool}}`: build tool (e.g. Vite, Parcel, Webpack, esbuild, Rollup, Babel, etc.). If it does not use a build tool, it will say `native` (pure HTML/CSS/JS).
4137- `{{language}}`: JavaScript language. Choices: `ts`, `js`
4238- `{{module-system}}`: JavaScript module resolution strategy. Choices: `esm`, `cjs`, `umd`, `amd`
4343-4444-## Types of tools
4545-4646-- **Minifier**: A tool that optimizes source code through methods like removing whitespace, shortening names of variables and arguments, etc. A modern bundler will also automatically minify.
4747-- **Bundler**: A tool that optimizes source code and its dependencies by turning it into a single file. Bundlers help performance by reducing the amount of network requests and reducing the request load size.
4848-- **Transpiler**: A compiler that, given some source code, will apply certain transformations and reproduce source code in the same or different language. For example, Babel.js can transpile ES2022 code to an older ES-level for wider cross-browser compatibility, such as ES2015. TypeScript is also capable of transpiling.
4949-- **Unit testing**: Unit testing involves ensuring a certain output for a given input, for the smallest testable parts of some code. Some popular testing frameworks include Vitest and Jest.
5050-- **E2E testing**: E2E (end-to-end) testing involves testing an application from start to finish to simulate real-life user scenarios. In the JS context, this typically involves spinning up a headless browser instance and testing against the instance.
5151-- **Benchmarking**: Benchmarking is another name for perfomance testing, which involves measuring the speed of some piece of code in a controlled environment. A benchmarker will typically include statistical measures such as standard deviations and regressions to make sure the benchmarks give accurate reports.
52395340## Questions and answers
5441