{"id":15646028,"url":"https://github.com/gwuhaolin/ui-component-loader","last_synced_at":"2025-09-14T20:03:32.719Z","repository":{"id":80950211,"uuid":"103636989","full_name":"gwuhaolin/ui-component-loader","owner":"gwuhaolin","description":"Modular UI component loader for webpack, a good alternative for babel-plugin-import.","archived":false,"fork":false,"pushed_at":"2021-11-30T08:32:14.000Z","size":34,"stargazers_count":51,"open_issues_count":1,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-25T07:08:41.599Z","etag":null,"topics":["ui-components","webpack-loader"],"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/gwuhaolin.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}},"created_at":"2017-09-15T09:04:16.000Z","updated_at":"2024-04-24T08:18:11.000Z","dependencies_parsed_at":"2023-04-25T21:48:48.030Z","dependency_job_id":null,"html_url":"https://github.com/gwuhaolin/ui-component-loader","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwuhaolin%2Fui-component-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwuhaolin%2Fui-component-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwuhaolin%2Fui-component-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwuhaolin%2Fui-component-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gwuhaolin","download_url":"https://codeload.github.com/gwuhaolin/ui-component-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242646208,"owners_count":20162850,"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":["ui-components","webpack-loader"],"created_at":"2024-10-03T12:11:03.620Z","updated_at":"2025-03-09T04:30:52.924Z","avatar_url":"https://github.com/gwuhaolin.png","language":"JavaScript","readme":"[![Npm Package](https://img.shields.io/npm/v/ui-component-loader.svg?style=flat-square)](https://www.npmjs.com/package/ui-component-loader)\n[![Build Status](https://img.shields.io/travis/gwuhaolin/ui-component-loader.svg?style=flat-square)](https://travis-ci.org/gwuhaolin/ui-component-loader)\n[![Npm Downloads](http://img.shields.io/npm/dm/ui-component-loader.svg?style=flat-square)](https://www.npmjs.com/package/ui-component-loader)\n\n# ui-component-loader\nModular UI component loader for webpack, a good alternative for [babel-plugin-import](https://github.com/ant-design/babel-plugin-import).\n\nCompatible with [antd](https://github.com/ant-design/ant-design), [antd-mobile](https://github.com/ant-design/ant-design-mobile), and so on.\n\n### Example\n\n| description | options | source | output |\n| --- | --- | --- | --- |\n| replace one | `lib: 'antd'` | `import {Button} from 'antd'` | `import Button from 'antd/lib/Button'` |\n| replace many | `lib: 'antd'` | `import {Button,Icon} from 'antd'` | `import Button from 'antd/lib/Button' import Icon from 'antd/lib/Icon'` |\n| set libDir | `lib: 'antd', libDir: 'es'` | `import {Button} from 'antd'` | `import Button from 'antd/es/Button'` |\n| use style | `lib: 'antd', style: 'index.css'` | `import {Button} from 'antd'` | `import Button from 'antd/lib/Button' import 'antd/lib/Button/index.css'` |\n| translate camel | `lib: 'antd', camel2: '-'` | `import {MyComponent} from 'antd'` | `import MyComponent from 'antd/lib/my-component'` |\n| componentDirMap | `lib: 'antd', camel2: '-',componentDirMap: {MyComponent: 'YourComponent'}` | `import {MyComponent} from 'antd'` | `import MyComponent from 'antd/lib/YourComponent'` |\n\n  \n### Usage\nInstall by:\n```bash\nnpm install ui-component-loader -D\n```\n\nEdit `webpack.config.js`:\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        use: [\n          'ts-loader',\n          {\n            loader: 'ui-component-loader',\n            options: {\n              'lib': 'antd',\n              'camel2': '-',\n              'style': 'style/css.js',\n            }\n          },\n        ],\n        // the path you import antd\n        include: path.resolve('src/client'),\n      },\n    ]\n  },\n};\n```\n\u003e The order of loaders has no require, but the source code pass to ui-component-loader must use ES6 module syntax.\n\nIf you have mutil package need to be spilt, can get options as a array like:\n```js\n{\n    loader: 'ui-component-loader',\n    options: {\n         antd: {\n              'camel2': '-',\n              'style': 'style/css.js',\n         },\n         mui: {\n         },\n    }\n}\n```\n\n## Options\n- **lib**: library want to replace,value is name in npm.\n- **libDir**: library directory path which store will use code, default it `lib`  \n- **style**: should append style file to a component? value is relative path to style file.\n- **camel2**: should translate MyComponent to my-component, value is the join string.\n- **existCheck**: should check if import file exist, only import file when exits, default will check. To close this check set existCheck to `(componentDirPath)=\u003e true`.\n- **componentDirMap**: a map to store Component Entry Dir in lib by ComponentName, it's structure should be `{ComponentName:ComponentDir}`,default is `{}`.\n\n## Diff with babel-plugin-import\n1. babel-plugin-import is a babel plugin, which means must be used in project with babel.\nBut in some project, like project use TypeScript, ui-component-loader is useful,\nui-component-loader **can be used in any project with webpack**.\n2. ui-component-loader **has better performance** as it's implement by regular expression replace string, but babel-plugin-import base on AST.\n \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgwuhaolin%2Fui-component-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgwuhaolin%2Fui-component-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgwuhaolin%2Fui-component-loader/lists"}