{"id":19379946,"url":"https://github.com/riskers/ts-develop-npm-module","last_synced_at":"2025-02-24T16:42:37.817Z","repository":{"id":48145601,"uuid":"516591699","full_name":"riskers/ts-develop-npm-module","owner":"riskers","description":"TS 开发 npm 模块","archived":false,"fork":false,"pushed_at":"2022-07-22T03:40:32.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-07T06:14:26.323Z","etag":null,"topics":["cjs","esm","microbundle","npm","package","typescript","umd"],"latest_commit_sha":null,"homepage":"https://riskers.notion.site/TS-CJS-ESM-npm-7337810836c848f5af6d0a2acb0f2829","language":"HTML","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/riskers.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}},"created_at":"2022-07-22T03:05:47.000Z","updated_at":"2023-03-08T15:41:40.000Z","dependencies_parsed_at":"2022-09-16T03:40:53.561Z","dependency_job_id":null,"html_url":"https://github.com/riskers/ts-develop-npm-module","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riskers%2Fts-develop-npm-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riskers%2Fts-develop-npm-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riskers%2Fts-develop-npm-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riskers%2Fts-develop-npm-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riskers","download_url":"https://codeload.github.com/riskers/ts-develop-npm-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240516892,"owners_count":19814094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["cjs","esm","microbundle","npm","package","typescript","umd"],"created_at":"2024-11-10T09:11:53.470Z","updated_at":"2025-02-24T16:42:37.779Z","avatar_url":"https://github.com/riskers.png","language":"HTML","readme":"# JS Module Explore\n\n使用 TS 开发了npm 模块，支持 UMD、CJS、ESM 等规范，并且在 Nodejs 和浏览器中验证\n\n\u003e 需要用到 lerna: `npm install --global lerna`\n\n安装依赖: `lerna bootstrap`\n\n## Typescript 开发 npm 包实践\n\n查看[my-js-module](./packages/my-js-module/)项目结构。这是一个很普通的包，仅仅有两个函数，是用来演示的。这里我采用 [microbundle](https://github.com/developit/microbundle) 作为项目的打包工具，要比 rollup 要简单一些。\n\n开始构建 npm 模块:\n\n```bash\n\u003e lerna run --scope my-js-module build \n```\n\n可以看到产生的 `dist` 结构:\n\n```bash\n| - dist\n    | - my-js-module.cjs        # CJS 规范\n    | - my-js-module.esm.js     # ESM 规范\n    | - my-js-module.modern.js  # 浏览器 type=\"modern\" 使用\n    | - my-js-module.umd.js     # 全局都可以使用\n```\n\n然后注意 `package.json` 这一部分:\n\n```json\n{\n  # 最原始的写法 CJS 路径\n  \"main\": \"dist/my-js-module.cjs\",\n  # TS 的 types 路径\n  \"types\": \"types/index.d.ts\",\n  # 这个包默认都是 ESM 类型\n  \"type\": \"module\",\n  # 使用 import 导入时，首先用该路径文件\n  \"module\": \"./dist/my-js-module.esm.js\",\n  # 更加细粒度的控制子目录访问路径，会替换默认的 main 路径\n  \"exports\": {\n    \".\": {\n      \"import\": \"./dist/my-js-module.esm.js\",\n      \"require\": \"./dist/my-js-module.cjs\"\n    },\n    \"./dist/*\": \"./dist/*\",\n    \"./types/*\": \"./types/*\"\n  },\n  \"scripts\": {\n    \"build\": \"npm run build:node \u0026 npm run build:browser\",\n    # 构建 node 中使用的模块，这里只有 cjs 模块\n    \"build:node\": \"rm -rf dist \u0026\u0026 microbundle -f cjs -o dist --compress=false --target=node --sourcemap=false --external all\",\n    # 构建浏览器中使用的模块，这里有 umd，esm，modern 模块，而且暴露出 JSMODULE 全局变量\n    \"build:browser\": \"rm -rf dist \u0026\u0026 microbundle -f umd,esm,modern -o dist --compress=false --target=web --name=JSMODULE --sourcemap=false --external all\"\n  },\n}\n```\n\n关键点都注释了，不明白的细看[这里](https://riskers.notion.site/package-json-4ae91d984b7a42789f6d2fcd98f1acaf)\n\n## 验证\n\n安装模块 - `lerna add my-js-module --scope my-js-module-test`\n\n### Nodejs\n\n```bash\n\u003e lerna run --scope my-js-module-test test:cjs:nodejs\n4\n94\n```\n\n```bash\n\u003e lerna run --scope my-js-module-test test:cjs:nodets\n4\n73\n```\n\n### Browser\n\n#### UMD\n\n```bash\n\u003e lerna run --scope my-js-module-test test:umd:browser\n```\n\n可以看到 UMD 还暴露出了 `JSMODULE` 这个变量：\n\n![](https://i.imgur.com/SKkGWKI.png)\n\n#### modern\n\n```bash\n\u003e lerna run --scope my-js-module-test test:modern:browser\n```\n\n![](https://i.imgur.com/g3AITf0.png)\n\n#### ESM\n\n```bash\n# build，这里使用的是 webpack\n\u003e lerna run --scope my-js-module-test build:esm  \n```\n\n```bash\n\u003e lerna run --scope my-js-module-test test:esm:browser\n```\n\n![](https://i.imgur.com/IAxvmn1.png)\n\n至此，验证完毕！\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friskers%2Fts-develop-npm-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friskers%2Fts-develop-npm-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friskers%2Fts-develop-npm-module/lists"}