Skip to content

Commit 1f7959c

Browse files
author
wuhaolin
committed
feat: add componentDirMap option
1 parent 810e9d7 commit 1f7959c

File tree

5 files changed

+57
-35
lines changed

5 files changed

+57
-35
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Compatible with [antd](https://github.com/ant-design/ant-design), [antd-mobile](
1616
| set libDir | `lib: 'antd', libDir: 'es'` | `import {Button} from 'antd'` | `import Button from 'antd/es/Button'` |
1717
| use style | `lib: 'antd', style: 'index.css'` | `import {Button} from 'antd'` | `import Button from 'antd/lib/Button' import 'antd/lib/Button/index.css'` |
1818
| translate camel | `lib: 'antd', camel2: '-'` | `import {MyComponent} from 'antd'` | `import MyComponent from 'antd/lib/my-component'` |
19+
| componentDirMap | `lib: 'antd', camel2: '-',componentDirMap: {MyComponent: 'YourComponent'}` | `import {MyComponent} from 'antd'` | `import MyComponent from 'antd/lib/YourComponent'` |
1920

2021

2122
### Usage
@@ -55,6 +56,7 @@ module.exports = {
5556
- **style**: should append style file to a component? value is relative path to style file.
5657
- **camel2**: should translate MyComponent to my-component, value is the join string.
5758
- **existCheck**: should check if import file exist, only import file when exits, default will check. To close this check set `existCheck=null`.
59+
- **componentDirMap**: a map to store Component Entry Dir in lib by ComponentName, it's structure should be `{ComponentName:ComponentDir}`,default is `{}`.
5860

5961
## Diff with babel-plugin-import
6062
1. babel-plugin-import is a babel plugin, which means must be used in project with babel.

‎lib/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ const loaderUtils = require('loader-utils');
22
const { replaceImport } = require('./util');
33

44
module.exports = function (source) {
5-
this.cacheable();
65
const options = loaderUtils.getOptions(this);
76
return replaceImport(source, options);
87
};

‎lib/util.js‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ const importReg = /import\s+{\s*(.+)\s*}\s+from\s+['"](.+)['"]/g;
1010
* @returns {string} component-name | component_name
1111
*/
1212
function tranCamel2(componentName, joinString) {
13-
return componentName.replace(/([a-z])([A-Z])/g, `$1${joinString}$2`).toLowerCase();
13+
if (typeof joinString === "string") {
14+
return componentName.replace(/([a-z])([A-Z])/g, `$1${joinString}$2`).toLowerCase();
15+
}
16+
return componentName;
1417
}
1518

1619
/**
@@ -27,41 +30,51 @@ function replaceImport(source, options = {}) {
2730
libDir = 'lib', //lib dir in npm
2831
style, // style file path
2932
camel2, // translate ComponentName to component-name | component_name
30-
existCheck = fileExistInNpm,// only import file when exits
33+
existCheck = fileExistInNpm, // only import file when exits
34+
componentDirMap = {}, // used to map a ComponentName to ComponentEntryPath in lib
3135
} = options;
3236
if (!lib) {
3337
return source;
3438
}
3539
return source.replace(importReg, function (org, importComponents, importFrom) {
3640
if (importFrom === lib) {
41+
// 需要导入的组件列表
3742
importComponents = importComponents.split(',');
3843
let ret = '';
3944
importComponents.forEach(function (componentName) {
45+
// 如果组件名称为空就直接忽略
4046
componentName = componentName.trim();
41-
let componentPath = componentName;
42-
if (camel2) {
43-
componentPath = tranCamel2(componentName, camel2);
47+
if (componentName.length === 0) {
48+
return
4449
}
4550

46-
if (componentName.length > 0) {
47-
// import js file
48-
const jsFilePath = path.join(importFrom, libDir, componentPath);
49-
if (typeof existCheck !== 'function' || existCheck(jsFilePath)) {
50-
ret += `import ${componentName} from '${jsFilePath}'\n`;
51-
}
51+
// 组件的入口目录路径
52+
let componentDirPath;
53+
54+
if (typeof componentDirMap[componentName] === "string") {
55+
// 如果在 map 配置了针对这个组件名称的入口目录映射，就优先采用映射
56+
componentDirPath = path.join(importFrom, libDir, componentDirMap[componentName]);
57+
} else {
58+
componentDirPath = path.join(importFrom, libDir, tranCamel2(componentName, camel2));
59+
}
60+
61+
// 导入组件入口 JS 文件
62+
if (typeof existCheck !== 'function' || existCheck(componentDirPath)) {
63+
ret += `import ${componentName} from '${componentDirPath}';`;
64+
}
5265

53-
if (style) {
54-
// import style file
55-
const styleFilePath = path.join(importFrom, libDir, componentPath, style);
56-
if (typeof existCheck !== 'function' || existCheck(styleFilePath)) {
57-
ret += `import '${styleFilePath}'\n`;
58-
}
66+
// 导入组件 CSS 入口文件
67+
if (style) {
68+
const styleFilePath = path.join(componentDirPath, style);
69+
if (typeof existCheck !== 'function' || existCheck(styleFilePath)) {
70+
ret += `import '${styleFilePath}';`;
5971
}
6072
}
6173
});
6274
return ret;
75+
} else {
76+
return org;
6377
}
64-
return org;
6578
});
6679
}
6780

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ui-component-loader",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"main": "./lib/index.js",
55
"engines": {
66
"node": ">= 6.0.0"

‎test/index.test.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,23 @@ describe('util.js#replaceImport', function () {
2222
{
2323
des: 'lib 命中,保留后面的;',
2424
source: `import {Button} from 'antd';`,
25-
output: `import Button from 'antd/lib/Button'\n;`,
25+
output: `import Button from 'antd/lib/Button';;`,
2626
options: {
2727
lib: 'antd'
2828
},
2929
},
3030
{
3131
des: 'lib 命中',
3232
source: `import {Button} from 'antd'`,
33-
output: `import Button from 'antd/lib/Button'\n`,
33+
output: `import Button from 'antd/lib/Button';`,
3434
options: {
3535
lib: 'antd'
3636
},
3737
},
3838
{
3939
des: '使用 libDir',
4040
source: `import {Button} from 'antd'`,
41-
output: `import Button from 'antd/es/Button'\n`,
41+
output: `import Button from 'antd/es/Button';`,
4242
options: {
4343
lib: 'antd',
4444
libDir: 'es',
@@ -47,36 +47,32 @@ describe('util.js#replaceImport', function () {
4747
{
4848
des: 'import 语句中间有很多空格',
4949
source: `import { Button} from "antd"`,
50-
output: `import Button from 'antd/lib/Button'\n`,
50+
output: `import Button from 'antd/lib/Button';`,
5151
options: {
5252
lib: 'antd'
5353
},
5454
},
5555
{
5656
des: '导入多个 component',
5757
source: `import { Button, Icon} from "antd"`,
58-
output: `import Button from 'antd/lib/Button'\nimport Icon from 'antd/lib/Icon'\n`,
58+
output: `import Button from 'antd/lib/Button';import Icon from 'antd/lib/Icon';`,
5959
options: {
6060
lib: 'antd'
6161
},
6262
},
6363
{
6464
des: '使用 style',
6565
source: `import {Button} from 'antd';`,
66-
output: `import Button from 'antd/lib/Button'\nimport 'antd/lib/Button/index.css'\n;`,
66+
output: `import Button from 'antd/lib/Button';import 'antd/lib/Button/index.css';;`,
6767
options: {
6868
lib: 'antd',
6969
style: 'index.css'
7070
},
7171
},
7272
{
7373
des: '导入多个 component & 使用 style',
74-
source: `import {Button,Icon} from 'antd';`,
75-
output: `import Button from 'antd/lib/Button'
76-
import 'antd/lib/Button/index.css'
77-
import Icon from 'antd/lib/Icon'
78-
import 'antd/lib/Icon/index.css'
79-
;`,
74+
source: `import {Button,Icon} from 'antd'`,
75+
output: `import Button from 'antd/lib/Button';import 'antd/lib/Button/index.css';import Icon from 'antd/lib/Icon';import 'antd/lib/Icon/index.css';`,
8076
options: {
8177
lib: 'antd',
8278
style: 'index.css'
@@ -85,7 +81,7 @@ import 'antd/lib/Icon/index.css'
8581
{
8682
des: '使用 相对路径的 style',
8783
source: `import {Button} from 'antd';`,
88-
output: `import Button from 'antd/lib/Button'\nimport 'antd/lib/Button/style/index.css'\n;`,
84+
output: `import Button from 'antd/lib/Button';import 'antd/lib/Button/style/index.css';;`,
8985
options: {
9086
lib: 'antd',
9187
style: './style/index.css'
@@ -94,7 +90,7 @@ import 'antd/lib/Icon/index.css'
9490
{
9591
des: '使用 camel2 转化大小写',
9692
source: `import {MyComponent} from 'antd'`,
97-
output: `import MyComponent from 'antd/lib/my-component'\n`,
93+
output: `import MyComponent from 'antd/lib/my-component';`,
9894
options: {
9995
lib: 'antd',
10096
camel2: '-'
@@ -103,12 +99,24 @@ import 'antd/lib/Icon/index.css'
10399
{
104100
des: '使用 camel2 转化大小写',
105101
source: `import {Button} from 'antd'`,
106-
output: `import Button from 'antd/lib/button'\n`,
102+
output: `import Button from 'antd/lib/button';`,
107103
options: {
108104
lib: 'antd',
109105
camel2: '-'
110106
},
111107
},
108+
{
109+
des: '使用 componentDirMap 映射路径',
110+
source: `import {MyComponent} from 'antd'`,
111+
output: `import MyComponent from 'antd/lib/YourComponent';`,
112+
options: {
113+
lib: 'antd',
114+
camel2: '-',
115+
componentDirMap: {
116+
MyComponent: 'YourComponent'
117+
}
118+
},
119+
},
112120
];
113121

114122
testData.forEach(({des, source, output, options = {}}) => {

0 commit comments

Comments
 (0)