{"id":20101709,"url":"https://github.com/spirosikmd/es6-lib","last_synced_at":"2026-05-09T05:03:17.682Z","repository":{"id":148577161,"uuid":"151841976","full_name":"spirosikmd/es6-lib","owner":"spirosikmd","description":"Illustrate how a library written in es6 can be published supporting tree shaking","archived":false,"fork":false,"pushed_at":"2018-10-07T07:49:25.000Z","size":84,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-02T17:16:09.423Z","etag":null,"topics":["es6","library","react","tree-shaking","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spirosikmd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-06T13:20:59.000Z","updated_at":"2018-10-07T07:49:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"5f57f188-7dac-4e7f-8c17-5ebc1b483cb2","html_url":"https://github.com/spirosikmd/es6-lib","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/spirosikmd/es6-lib","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spirosikmd%2Fes6-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spirosikmd%2Fes6-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spirosikmd%2Fes6-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spirosikmd%2Fes6-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spirosikmd","download_url":"https://codeload.github.com/spirosikmd/es6-lib/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spirosikmd%2Fes6-lib/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32807861,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","library","react","tree-shaking","webpack"],"created_at":"2024-11-13T17:26:25.746Z","updated_at":"2026-05-09T05:03:17.663Z","avatar_url":"https://github.com/spirosikmd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# es6-lib\n\nThis project illustrates how a library written in es6 can be published supporting [tree shaking](https://webpack.js.org/guides/tree-shaking/). I intentionally created a minimal React component library as it involves some extra configuration than a simple tiny module.\n\nThe library in the [src](./src) directory is written in es6 using the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`export`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) syntax. The project that uses this library can be found in the [test](./test) directory.\n\nThe library is bundled with [rollup](https://rollupjs.org/guide/en). The [rollup configuration](./rollup.config.js) uses babel to create an es module using the `import` and `export` syntax.\n\nThe project is bundled with [webpack](https://webpack.js.org/) as it is meant to run as a stand-alone application in the browser. The [webpack configuration](./test/webpack.config.js) has a specific optimization configuration to create separate bundles for vendor libraries and webpack runtime code. This optimization configuration is not needed, and it is only used in this case to isolate the code that is produced for the `index.js` file.\n\n## How to test it yourself\n\nClone the project and install and build the library:\n\n```\nyarn install \u0026\u0026 yarn build\n```\n\nThen navigate to the [test](./test) directory and install and build the project:\n\n```\ncd test \u0026\u0026 yarn install \u0026\u0026 yarn build\n```\n\nNotice that the webpack output will contain something like the following:\n\n```\nindex.js  221 bytes       0  [emitted]  index\n```\n\nNow if we import and use the `Input` component in [./test/src/index](./test/src/index.js):\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Button, Input } from 'es6-lib';\n\nrender(\n  \u003cdiv\u003e\n    \u003cButton /\u003e\n    \u003cInput /\u003e\n  \u003c/div\u003e,\n  document.getElementById('root')\n);\n```\n\nand run `yarn build` again, we'll notice that the size of the `index.js` file increased.\n\n```\nindex.js  279 bytes       0  [emitted]  index\n```\n\nThat is because `webpack` now imported the code for the `Input` component as well. In the previous build, `webpack` didn't include the code for the `Input` component from the `es6-lib` package, as we were not using it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspirosikmd%2Fes6-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspirosikmd%2Fes6-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspirosikmd%2Fes6-lib/lists"}