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:

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

`js
//tsconfig.json
{
...
"module": "ESNext",
...
}
`

`js
// 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 )

`js
//tsconfig.json
{
...
"module": "ESNext",
...
}
`

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

`js
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 snake_case. 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:

`js
tsImportPluginFactory({
libraryName: 'antd',
libraryDirectory: 'lib',
style: true,
})
`

`js
{
libraryName: '@material-ui/core',
libraryDirectory: '',
camel2DashComponentName: false
}
`

options can be an array:

example:

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

Compatible libs:

ant-design

`ts
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' .

`ts
transformerFactory({
style: false,
libraryName: 'lodash',
libraryDirectory: null,
camel2DashComponentName: false,
})
`

antd-mobile

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

`ts
import { Button } from '@material-ui/core'
import { Remove, Refresh, Add } from '@material-ui/icons'
`

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

`ts
import { Button } from 'element-ui'
`

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

`ts
transformerFactory({
libraryDirectory: '../_esm2015/operators',
libraryName: 'rxjs/operators',
style: false,
camel2DashComponentName: false,
transformToDefaultImport: false,
})
`

- RxJS v6:

`ts
transformerFactory([
{
libraryDirectory: '../_esm5/internal/operators',
libraryName: 'rxjs/operators',
camel2DashComponentName: false,
transformToDefaultImport: false,
},
{
libraryDirectory: '../_esm5/internal/observable',
libraryName: 'rxjs',
camel2DashComponentName: false,
transformToDefaultImport: false,
},
])
``

Contributors

$3

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

$3

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]