Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gwuhaolin/ui-component-loader
Modular UI component loader for webpack, a good alternative for babel-plugin-import.
https://github.com/gwuhaolin/ui-component-loader
ui-components webpack-loader
Last synced: 3 months ago
JSON representation
Modular UI component loader for webpack, a good alternative for babel-plugin-import.
- Host: GitHub
- URL: https://github.com/gwuhaolin/ui-component-loader
- Owner: gwuhaolin
- Created: 2017-09-15T09:04:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-11-30T08:32:14.000Z (about 3 years ago)
- Last Synced: 2024-10-10T12:54:34.833Z (3 months ago)
- Topics: ui-components, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 33.2 KB
- Stars: 51
- Watchers: 4
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/ui-component-loader)
[](https://travis-ci.org/gwuhaolin/ui-component-loader)
[](https://www.npmjs.com/package/ui-component-loader)
# ui-component-loader
Modular UI component loader for webpack, a good alternative for [babel-plugin-import](https://github.com/ant-design/babel-plugin-import).
Compatible with [antd](https://github.com/ant-design/ant-design), [antd-mobile](https://github.com/ant-design/ant-design-mobile), and so on.
### Example
| description | options | source | output |
| --- | --- | --- | --- |
| replace one | `lib: 'antd'` | `import {Button} from 'antd'` | `import Button from 'antd/lib/Button'` |
| replace many | `lib: 'antd'` | `import {Button,Icon} from 'antd'` | `import Button from 'antd/lib/Button' import Icon from 'antd/lib/Icon'` |
| set libDir | `lib: 'antd', libDir: 'es'` | `import {Button} from 'antd'` | `import Button from 'antd/es/Button'` |
| use style | `lib: 'antd', style: 'index.css'` | `import {Button} from 'antd'` | `import Button from 'antd/lib/Button' import 'antd/lib/Button/index.css'` |
| translate camel | `lib: 'antd', camel2: '-'` | `import {MyComponent} from 'antd'` | `import MyComponent from 'antd/lib/my-component'` |
| componentDirMap | `lib: 'antd', camel2: '-',componentDirMap: {MyComponent: 'YourComponent'}` | `import {MyComponent} from 'antd'` | `import MyComponent from 'antd/lib/YourComponent'` |
### Usage
Install by:
```bash
npm install ui-component-loader -D
```
Edit `webpack.config.js`:
```js
module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
use: [
'ts-loader',
{
loader: 'ui-component-loader',
options: {
'lib': 'antd',
'camel2': '-',
'style': 'style/css.js',
}
},
],
// the path you import antd
include: path.resolve('src/client'),
},
]
},
};
```
> The order of loaders has no require, but the source code pass to ui-component-loader must use ES6 module syntax.
If you have mutil package need to be spilt, can get options as a array like:
```js
{
loader: 'ui-component-loader',
options: {
antd: {
'camel2': '-',
'style': 'style/css.js',
},
mui: {
},
}
}
```
## Options
- **lib**: library want to replace,value is name in npm.
- **libDir**: library directory path which store will use code, default it `lib`
- **style**: should append style file to a component? value is relative path to style file.
- **camel2**: should translate MyComponent to my-component, value is the join string.
- **existCheck**: should check if import file exist, only import file when exits, default will check. To close this check set existCheck to `(componentDirPath)=> true`.
- **componentDirMap**: a map to store Component Entry Dir in lib by ComponentName, it's structure should be `{ComponentName:ComponentDir}`,default is `{}`.
## Diff with babel-plugin-import
1. babel-plugin-import is a babel plugin, which means must be used in project with babel.
But in some project, like project use TypeScript, ui-component-loader is useful,
ui-component-loader **can be used in any project with webpack**.
2. ui-component-loader **has better performance** as it's implement by regular expression replace string, but babel-plugin-import base on AST.