babel-plugin-kimport


Install

``shell
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.