babel-plugin-kimport

Install

npm i babel-plugin-kimport -D

Example

Converts

import { Button } from 'components'

var button = require('components/lib/button')
require('components/lib/button/style.css')

Usage

Via .babelrc or babel-loader.

{
  "plugins": [["kimport", options]]
}

Multiple Module

{
  "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:

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:

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:

[
  "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:

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:

[
  "import",
    {
      "libraryName": "k-view",
      "customName": require('path').resolve(__dirname, './customName.js')
    }
]

The customName.js looks like this:

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.