A component modular import plugin for babel
npm install babel-plugin-kimportshell
npm i babel-plugin-kimport -D
`
Example
Converts
`javascript
import { Button } from 'components'
`
to
`javascript
var button = require('components/lib/button')
require('components/lib/button/style.css')
`
Usage
Via .babelrc or babel-loader.
`javascript
{
"plugins": [["kimport", options]]
}
`
Multiple Module
`javascript
{
"plugins": [xxx,
["kimport", {
libraryName: "k-view",
}, "k-view"],
["kimport", {
libraryName: "test-module",
}, "test-module"]
]
}
`
$3
`
- lib // 'libDir'
- index.js // or custom 'root' relative path
- style.css // or custom 'style' relative path
- componentA
- index.js
- style.css
- componentB
- index.js
- style.css
`
$3
- ["component"]: import js modularly
- ["component", { "libraryName": "component" }]: module name
- ["component", { "libraryDirectory": "lib" }]: lib directory , default lib
- ["component", { "camel2UnderlineComponentName": false }]: whether parse name to underline mode or not, default false
- ["component", { "camel2DashComponentName": true }]: whether parse name to dash mode or not, default true
#### customName
We can use customName to customize import file path.
For example, the default behavior:
`typescript
import { TimePicker } from "k-view"
↓ ↓ ↓ ↓ ↓ ↓
var _timepicker = require('k-view/lib/time-picker');
require('k-view/lib/time-picker/style.css')
`
You can set camel2DashComponentName to false to enable transfer from camel to dash:
`typescript
import { TimePicker } from "k-view"
↓ ↓ ↓ ↓ ↓ ↓
var _timepicker = require('k-view/lib/TimePicker');
require('k-view/lib/TimePicker/style.css')
`
And finally, you can use customName to customize each name parsing:
`js
[
"import",
{
"libraryName": "k-view",
"customName": (name: string) => {
if (name === 'TimePicker'){
return 'k-view/lib/custom-time-picker';
}
return k-view/lib/${name};
}
}
]
`
So this result is:
`typescript
import { TimePicker } from "k-view"
↓ ↓ ↓ ↓ ↓ ↓
var _timepicker = require('k-view/lib/custom-time-picker');
`
In some cases, the transformer may serialize the configuration object. If we set the customName to a function, it will lost after the serialization.
So we also support specifying the customName with a JavaScript source file path:
`js
[
"import",
{
"libraryName": "k-view",
"customName": require('path').resolve(__dirname, './customName.js')
}
]
`
The customName.js looks like this:
`js
module.exports = function customName(name) {
return k-view/lib/${name};
};
`
#### customStyleName
customStyleName` works exactly the same as customName, except that it deals with style file path.