1.4.4 • Published 2 years ago
ui-component-loader v1.4.4
ui-component-loader
Modular UI component loader for webpack, a good alternative for babel-plugin-import.
Compatible with antd, antd-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:
npm install ui-component-loader -D
Edit webpack.config.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:
{
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
- 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.
ui-component-loader has better performance as it's implement by regular expression replace string, but babel-plugin-import base on AST.
1.4.4
2 years ago
1.4.3
4 years ago
1.4.2
5 years ago
1.4.1
5 years ago
1.4.0
5 years ago
1.3.3
5 years ago
1.3.2
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.6
6 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago