# babel-plugin-kimport

> A component modular import plugin for babel

Latest version **1.2.3** (published 2020-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-kimport
pnpm add babel-plugin-kimport
yarn add babel-plugin-kimport
bun add babel-plugin-kimport
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2020-01-21 |
| First published | 2019-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | cgj |
| Maintainers | cgj |
| Keywords | babel-plugin, import |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-kimport
- Repository: https://github.com/SoldierAb/babel-plugin-kimport
- Homepage: https://github.com/SoldierAb/babel-plugin-kimport#readme
- Issues: https://github.com/SoldierAb/babel-plugin-kimport/issues
- npm.io page: https://npm.io/package/babel-plugin-kimport

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.2.3 (latest) — 2020-01-21
- 1.2.2 — 2020-01-21
- 1.2.1 — 2020-01-21
- 1.2.0 — 2020-01-21
- 1.1.0 — 2020-01-07
- 1.0.2 — 2020-01-07
- 1.0.1 — 2020-01-06
- 1.0.0 — 2019-04-16

## README

# babel-plugin-kimport

[![npm version](https://img.shields.io/npm/v/babel-plugin-kimport.svg?style=flat-square)](https://www.npmjs.org/package/babel-plugin-kimport)
[![install size](https://packagephobia.now.sh/badge?p=babel-plugin-kimport)](https://packagephobia.now.sh/result?p=babel-plugin-kimport)
[![npm downloads](https://img.shields.io/npm/dm/babel-plugin-kimport.svg?style=flat-square)](http://npm-stat.com/charts.html?package=babel-plugin-kimport)
[![gitter chat](https://img.shields.io/gitter/room/mzabriskie/babel-plugin-kimport.svg?style=flat-square)](https://gitter.im/mzabriskie/babel-plugin-kimport)
[![build status](https://img.shields.io/travis/SoldierAb/babel-plugin-kimport/master.svg?style=flat-square)](https://travis-ci.org/SoldierAb/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"]
  ]
}
```

### Component directory structure

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



### options

- `["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.

---
_Source: https://npm.io/package/babel-plugin-kimport · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._