ts-import-plugin

by Brooooooklyn

Brooooooklyn / ts-import-plugin

babel-import-plugin TypeScript Implement

484 Stars 24 Forks Last release: 8 months ago (v1.6.3) MIT License 827 Commits 30 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

default

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

default

false
- libraryDirectory
string | ((name: string) => string)

default

'lib'
- camel2DashComponentName
boolean

default

true
- camel2UnderlineComponentName
boolean

default

false
- libraryOverride
boolean

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.