{"id":28560127,"url":"https://github.com/dtstack/babel-plugin-treasure","last_synced_at":"2025-06-10T09:07:37.542Z","repository":{"id":104050012,"uuid":"308280606","full_name":"DTStack/babel-plugin-treasure","owner":"DTStack","description":"Base on babel-plugin-import , committed to achieving the AST optimization requirements of a unified library","archived":false,"fork":false,"pushed_at":"2021-01-05T06:31:38.000Z","size":843,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-02-25T12:38:33.186Z","etag":null,"topics":["ast","babel-plugin","load-on-demand"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DTStack.png","metadata":{"files":{"readme":"README.CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-10-29T09:37:27.000Z","updated_at":"2022-01-17T03:26:59.000Z","dependencies_parsed_at":"2023-06-29T11:46:24.910Z","dependency_job_id":null,"html_url":"https://github.com/DTStack/babel-plugin-treasure","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fbabel-plugin-treasure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fbabel-plugin-treasure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fbabel-plugin-treasure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fbabel-plugin-treasure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DTStack","download_url":"https://codeload.github.com/DTStack/babel-plugin-treasure/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fbabel-plugin-treasure/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259043771,"owners_count":22797163,"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":["ast","babel-plugin","load-on-demand"],"created_at":"2025-06-10T09:07:36.781Z","updated_at":"2025-06-10T09:07:37.533Z","avatar_url":"https://github.com/DTStack.png","language":"HTML","readme":"# babel-plugin-treasure\n\n![NPM version](https://img.shields.io/badge/npm-v0.9.0-blue) ![Build Status](https://img.shields.io/badge/build-passing-orange) ![Coverage Status](https://img.shields.io/badge/coverage-97%25-brightgreen) ![License Status](https://img.shields.io/badge/license-MIT-lightgrey)  \n基于 babel-plugin-import 致力于实现统一库的 AST 优化要求，应对各种 AST 节点修改操作的诉求。目前用于统一式便捷解决任何组件库的按需加载需求\n\n---\n\n- [English Instruction](./README.md)\n- [中文说明](./README.CN.md)\n\n## 与 babel-plugin-import 的区别\n\n### 优化点\n\n- 无破坏性改动，兼容原本 babel-plugin-import 的所有 API\n- 支持组件名或者方法名大小驼峰名称转换\n- 支持以对象的形式输入自定义路径节点\n- 支持导出入口是部分 default 属性的组件\n- 支持 react17+ jsx 新转换\n\n### 修复点\n\n- 修复 babel-plugin-import 未对 switch 相关 AST 树进行转换的错误\n\n## 安装\n\n```javascript\n// 使用 npm\nnpm i babel-plugin-treasure --save-dev\n\n// 使用 yarn\nyarn add babel-plugin-treasure -D\n```\n\n## 使用说明\n\n可通过以下两种途径进行使用\n\n- [babelrc](https://babeljs.io/docs/usage/babelrc/)\n- [babel-loader](https://github.com/babel/babel-loader)\n\n添加到 `.babelrc` 或 babel-loader.\n\n```js\n{\n  \"plugins\": [[\"treasure\", options]]\n}\n```\n\n### 配置\n\n`options` 可以是一个对象.\n\n```javascript\n{\n  \"libraryName\": \"dt-react-component\",\n  \"style\": true,   // or 'css'\n}\n```\n\n`options` 可以是一个数组,但不支持在 babel@7+ 环境中设置\n\n```javascript\n[\n  {\n    libraryName: 'dt-react-component',\n    style: true, // or 'css'\n  },\n];\n```\n\n`options` 在 babel@7+环境中不能是数组,但是你可以给插件添加一个名字来支持复用.\n\n比如:\n\n```javascrit\n// .babelrc\n\"plugins\": [\n  [\"treasure\", { \"libraryName\": \"dt-react-component\", \"libraryDirectory\": \"lib\"}, \"dtcomponent\"],\n  [\"treasure\", { \"libraryName\": \"lodash\", \"libraryDirectory\": \"lib\"}, \"lodash\"]\n]\n```\n\n### 按需加载库\n\n当你在项目中单纯引入库时，你只需要添加如下配置即可。 例如配置 dt-react-component：\n\n```javascript\n  \"plugins\": [\n    [\n      \"treasure\",\n      {\n        \"libraryName\": \"dt-react-component\",\n        \"libraryDirectory\": \"lib\",\n        \"camel2DashComponentName\": \"lower\",\n        \"style\": \"css\"\n      }\n    ]\n  ]\n```\n\n注意：当你开发的项目中有多个库均需要使用按需加载，可以加一个别名已进行区分，例如 dt-react-component 与 antd 一起使用：\n\n```javascript\n  \"plugins\": [\n    [\n      \"treasure\",\n      {\n        \"libraryName\": \"antd\",\n        \"libraryDirectory\": \"lib\",\n        \"style\": \"css\"\n      },\n      \"antd\"\n    ],\n    [\n      \"treasure\",\n      {\n        \"libraryName\": \"dt-react-component\",\n        \"libraryDirectory\": \"lib\",\n        \"camel2DashComponentName\": \"lower\",\n        \"style\": \"css\"\n      },\n      \"dt-react-component\"\n    ]\n  ]\n```\n\n## 插件 API 列表\n\n### libraryName\n\n需要按需引入 library 的名称，必填。\n\n#### `{ \"libraryName\": \"dt-react-component\" }`\n\n### libraryDirectory\n\n制定 library 的包格式目录，一般有 lib, es, esm, umd 等，由包开发者制定。此选项默认值为 lib\n\n#### `{ libraryDirectory: \"lib\" }`\n\n### style\n\n是否需要按需加载 css 文件，默认不开启  \nNote : 当设置 style 为 true 的时候加载 css 预编译文件(less/scss)，设置为 css 时加载 css 文件.\n\n加载 css 预编译文件：\n\n#### `{ libraryDirectory: true }`\n\n加载 css 文件：\n\n#### `{ libraryDirectory: \"css\" }`\n\n### styleLibraryDirectory\n\n制定 css 文件的 library 的包，一般不需要写\n\n#### `{ styleLibraryDirectory: \"lib\" }`\n\n### camel2DashComponentName\n\n制定组件名的转换，参数有四种，默认为 true。转换规则如下所示：\n\n```js\nimport { ChromeDownload  } from 'dt-react-component'\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\n// 当 camel2DashComponentName: true\nChromeDownload → chrome-download\n\n// 当 camel2DashComponentName: false\nChromeDownload → ChromeDownload // 不做改动\n\n// 当 camel2DashComponentName: \"lower\"\nChromeDownload → chromeDownload // 转换小驼峰\n\n// 当 camel2DashComponentName: \"upper\"\nChromeDownload → ChromeDownload // 转换大驼峰\n```\n\n### camel2UnderlineComponentName\n\n处理多词构成的组件以\\_进行单词分割\n\n```js\nimport { ChromeDownload } from 'dt-react-component'\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nChromeDownload → chrome_download\n```\n\n### transformToDefaultImport\n\n处理默认导入库的属性，默认为 true。你可以给予一个数组，在数组中的组件，最后不会以默认形式进行导出。  \n如果你的库完全没有默认导入，请把选项设置为 false  \n举例：\n\n```js\n// 设置 transformToDefaultImport:[ChromeDownload]\nimport { ChromeDownload, Circle } from 'dt-react-component'\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nimport _Circle from \"dt-react-component/lib/circle\";\nimport { ChromeDownload as _ChromeDownload } from \"dt-react-component/lib/chromeDownload\";\n```\n\n### customName\n\n处理个别不统一规则的序列，支持函数，对象与路径导入\n\n```js\n// 函数形式\n[\n  'treasure',\n  {\n    libraryName: 'dt-react-component',\n    customName: (name: string) =\u003e {\n      if (name === 'go-back') {\n        return 'antd/lib/go-back';\n      }\n      return `antd/lib/${name}`;\n    },\n  },\n];\n```\n\n通过处理后，会变成这样\n\n```js\nimport { GoBack } from \"antd\"\n\n↓ ↓ ↓ ↓ ↓ ↓\n\nvar _button = require('antd/lib/go-back');\n```\n\n```js\n// 对象形式\n[\n  'treasure',\n  {\n    libraryName: 'dt-react-component',\n    customName: {\n      GoBack: 'dt-react-component/lib/go-back',\n    },\n  },\n];\n```\n\n说明：当你使用函数时，函数形参是经过 styleLibraryDirectory 或 camel2DashComponentName 转换后的的名称，当你使用对象作为参数时，对象的 key 不会经过特殊转换，customStyleName 同理。  \n除此之外，你还可以选择引用路径：\n\n```js\n// 引用路径\n[\n  'treasure',\n  {\n    libraryName: 'dt-react-component',\n    customName: {\n      GoBack: require('path').resolve(__dirname, './customName.js'),\n    },\n  },\n];\n```\n\n`customName.js`类似：\n\n```js\nmodule.exports = function customName(name) {\n  return `dt-react-component/lib/${name}`;\n};\n```\n\n#### customStyleName\n\n与 customName 同理，只是用于处理 style 文件路径\n\n#### fileName\n\n处理链接到具体的文件，例如：\n\n```js\n// 对象形式\n[\n  \"treasure\",\n    {\n      \"libraryName\": \"dt-react-component\",\n      \"fileName\": \"example\"\n      \"customName\": {\n         \"GoBack\": \"dt-react-component/lib/go-back\",\n      }\n    }\n]\n```\n\n转换后结果如下：\n\n```js\nimport { ChromeDownload } from 'dt-react-component'\n\n↓ ↓ ↓ ↓ ↓ ↓\n\nimport 'dt-react-component/lib/chrome-download/exmaple'\n```\n\n## 路线图\n\n- 随着各类库的变革做出及时更新\n- 支持更多的 AST 类型操作\n- 根据 treasure IDE 动态配置 AST 操作功能类型\n\n## 执照\n\n[MIT](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtstack%2Fbabel-plugin-treasure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtstack%2Fbabel-plugin-treasure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtstack%2Fbabel-plugin-treasure/lists"}