@nice-labs/ts-import-plugin

babel-plugin-import TypeScript version

Usage no npm install needed!

<script type="module">
  import niceLabsTsImportPlugin from 'https://cdn.skypack.dev/@nice-labs/ts-import-plugin';
</script>

README

npm version

@nice-labs/ts-import-plugin

Modular import plugin for TypeScript.

The library predefined supports:

  • Functional library
    • lodash
    • ramda
    • async
    • date-fns
    • rxjs@5
    • rxjs@6
  • UI framework
    • react-bootstrap
    • material-ui

Why use this

transform such code:

import _, { add } from "lodash";
import { getTime } from "date-fns";
_.chunk;

into:

import add from "lodash/add";
import _$chunk from "lodash/chunk";
import getTime from "date-fns/get_time";
_$chunk;

Usage with ts-loader (webpack)

import webpack from "webpack";
import tsImportPluginFactory from "@nice-labs/ts-import-plugin";

const configure: webpack.Configuration = {
  // ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: require.resolve("ts-loader"),
        options: {
          compilerOptions: {
            module: "esnext"
          },
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory(
                // predefined-names or ILibrary objects
                "lodash",
                "date-fns",
                {
                  // ILibrary object
                  libraryName: "antd",
                  libraryPath: "lib",
                  moduleName: "kebabCase",
                  appendPaths: path => `${path}/style/index.less`
                }
              )
            ]
          })
        }
      }
    ]
  }
  // ...
};

export default configure;

ILibrary definition

Reference: src/types.ts

Compatible libraries

Reference: src/libraries.ts

About antd & antd-mobile supports

Reference: test/test/antd.test.ts

License

see LICENSE