Need help with ts-import-plugin?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Brooooooklyn
529 Stars 30 Forks MIT License 1.1K Commits 8 Opened issues

Description

babel-import-plugin TypeScript Implement

Services available

!
?

Need anything else?

Contributors list

Financial Contributors on Open Collective npm version CircleCI codecov

ts-import-plugin

Modular import plugin for TypeScript, compatible with antd, antd-mobile and so on.

webpack template

./webpack.config.js
, run:
npm start
to see the bundle analyzer.

This plugin is not work if your are using

import * as _ from 'lodash'
or
import _ from 'lodash'

bundle-analyzer

Why use this

transform such code:

ts
import { Alert, Card as C } from 'antd'
into:
import Alert from 'antd/lib/alert'
import 'antd/lib/alert/style/index.less'
import { default as C } from 'antd/lib/card'
import 'antd/lib/card/style/index.less'

Usage

With ts-loader

//tsconfig.json
{
  ...
  "module": "ESNext",
  ...
}
// webpack.config.js
const tsImportPluginFactory = require('ts-import-plugin')

module.exports = { // ... module: { rules: [ { test: /.(jsx|tsx|js|ts)$/, loader: 'ts-loader', options: { transpileOnly: true, getCustomTransformers: () => ({ before: [ tsImportPluginFactory( /** options */) ] }), compilerOptions: { module: 'es2015' } }, exclude: /node_modules/ } ] }, // ... }

With awesome-typescript-loader ( >= 3.5.0 )

//tsconfig.json
{
  ...
  "module": "ESNext",
  ...
}
// webpack.config.js
const tsImportPluginFactory = require('ts-import-plugin')

module.exports = { // ... module: { rules: [ { test: /.tsx?$/, loader: 'awesome-typescript-loader', options: { getCustomTransformers: () => ({ before: [ tsImportPluginFactory( /** options */) ] }), }, exclude: /node_modules/ } ] }, // ... }

With rollup

import typescript from 'rollup-plugin-typescript2' // or '@rollup/plugin-typescript'
import createTransformer from 'ts-import-plugin'

const transformer = createTransformer({ libraryDirectory: 'es', libraryName: 'antd', style: true })

export default { input: ./test/fixtures/index.tsx, plugins: [typescript({ clean: true, transformers: [() => ({ before: transformer, })] })], output: [ { file: ./dist/rollup.dist.js, format: 'esm', }, ], }

Options

options
can be an object:
  • libraryName
    string
    - The name of the library in the import. e.g. If using
    import { foo } from 'Bar'
    the library should be set to 'bar'.

default

'antd'
- style
boolean | string | ((path: string) => string)

default

false
- libraryDirectory
string | ((name: string) => string)
- The directory within the library to replace the import with. e.g. If you have
import { foo } from 'Bar'
, it will be replaced to
import foo from
`Bar/${libraryDirectory}/foo``

default

'lib'
- camel2DashComponentName
boolean
- Builtin method to use to transform the component name. This does transform the component name from camelCase to dashed. e.g.
FooBar
gets transformed to
foo-bar

default

true
- camel2UnderlineComponentName
boolean
- Builtin method to use to transform the component name. This does transform the component name from camelCase to snakecase. e.g.
FooBar
gets transformed to `foo
bar`

default

false
- libraryOverride
boolean
- Setting to false (default) prepends the
libraryName
to the
libraryDirectory
(with a path separator) set to true if you want to use the
libraryDirectory
as the full path for the import.

default

false
  • failIfNotFound
    boolean
    - If the component is not found in the library, the full library is imported by default. set to true to fail the build.

default

false

example:

tsImportPluginFactory({
  libraryName: 'antd',
  libraryDirectory: 'lib',
  style: true
})
{
  libraryName: '@material-ui/core',
  libraryDirectory: '',
  camel2DashComponentName: false
}

options
can be an array:

example:

[
  {
    libraryName: 'antd',
    libraryDirectory: 'lib',
    style: true
  }, {
    libraryName: '@material-ui/core',
    libraryDirectory: '',
    camel2DashComponentName: false
  }
]

Compatible libs:

ant-design

const transformerFactory = require('ts-import-plugin')
// with less
transformerFactory({ style: true })
// with css
transformerFactory({ style: 'css' })
// without style
transformerFactory()

lodash

notice you should manual

import 'lodash/core'
in your project if your are using
import { chain } from 'lodash'
.
transformerFactory({
  style: false,
  libraryName: 'lodash',
  libraryDirectory: null,
  camel2DashComponentName: false
})

antd-mobile

// with css.web
transformerFactory({ libraryName: 'antd-mobile', style: 'css', styleExt: 'css.web' })

// antd-mobile recently changed styleExt. If error occurs with prev, try next. transformerFactory({ libraryName: 'antd-mobile', style: 'css' })

material-ui

import { Button } from '@material-ui/core'
import { Remove, Refresh, Add } from '@material-ui/icons'
transformerFactory({
  libraryName: '@material-ui/core',
  libraryDirectory: '',
  camel2DashComponentName: false
})

// svg-icons transformerFactory({ libraryDirectory: importName => { const stringVec = importName.split(/([A-Z][a-z]+|[0-9]*)/) .filter(s => s.length) .map(s => s.toLocaleLowerCase())

return stringVec
  .reduce((acc, cur, index) => {
    if (index > 1) {
      return acc + '-' + cur
    } else if (index === 1) {
      return acc + '/' + cur
    }
    return acc + cur
  }, '')

}, libraryName: '@material-ui/icons', style: false, camel2DashComponentName: false })

element-ui

import { Button } from 'element-ui'
transformerFactory({
    libraryName: 'element-ui',
    libraryDirectory: 'lib',
    camel2DashComponentName: true,
    style: (path: string) =>
        join('element-ui', 'lib', 'theme-chalk', `${
            camel2Dash(basename(path, '.js'))}.css`),
})

RxJS

see rxjs-webpack-treeshaking-example for more details

only compatible for 5.5+

  • RxJS v5:
transformerFactory({
  libraryDirectory: '../_esm2015/operators',
  libraryName: 'rxjs/operators',
  style: false,
  camel2DashComponentName: false,
  transformToDefaultImport: false
})
  • RxJS v6:
transformerFactory([
  {
    libraryDirectory: '../_esm5/internal/operators',
    libraryName: 'rxjs/operators',
    camel2DashComponentName: false,
    transformToDefaultImport: false
  },
  {
    libraryDirectory: '../_esm5/internal/observable',
    libraryName: 'rxjs',
    camel2DashComponentName: false,
    transformToDefaultImport: false,
  }
])

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.