# ts-import-plugin
> babel-plugin-import TypeScript version
Latest version **3.0.0** (published 2023-04-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install ts-import-plugin
pnpm add ts-import-plugin
yarn add ts-import-plugin
bun add ts-import-plugin
```
## Health
**Score 45/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.
Warnings: low downloads.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 3.0.0 |
| Published | 2023-04-15 |
| First published | 2017-07-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 55.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 603 |
| Author | LongYinan |
| Maintainers | broooooklyn |
| Keywords | antd, TypeScript, plugin |
## Links
- npm: https://www.npmjs.com/package/ts-import-plugin
- Repository: https://github.com/Brooooooklyn/ts-import-plugin
- Homepage: https://github.com/Brooooooklyn/ts-import-plugin#readme
- Issues: https://github.com/Brooooooklyn/ts-import-plugin/issues
- Funding: https://github.com/sponsors/Brooooooklyn
- npm.io page: https://npm.io/package/ts-import-plugin
## Alternatives
- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads
## Recent versions
- 3.0.0 (latest) — 2023-04-15
- 2.0.0 — 2021-11-24
- 1.6.7 — 2020-12-01
- 1.6.6 — 2020-04-03
- 1.6.5 — 2020-03-02
- 1.6.4 — 2020-03-02
- 1.6.3 — 2020-02-11
- 1.6.2 — 2019-12-10
- 1.6.1 — 2019-06-21
- 1.6.0 — 2019-06-21
- 1.5.5 — 2018-09-07
- 1.5.4 — 2018-06-25
- 1.5.3 — 2018-06-22
- 1.5.2 — 2018-06-05
- 1.5.1 — 2018-06-04
- … 17 more at https://npm.io/package/ts-import-plugin/versions
## README
[](https://opencollective.com/ts-import-plugin) [](https://www.npmjs.com/package/ts-import-plugin)
[](https://circleci.com/gh/Brooooooklyn/ts-import-plugin)
[](https://codecov.io/gh/Brooooooklyn/ts-import-plugin)
# 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'`
# 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](https://github.com/ant-design/ant-design)
```ts
const transformerFactory = require('ts-import-plugin')
// with less
transformerFactory({ style: true })
// with css
transformerFactory({ style: 'css' })
// without style
transformerFactory()
```
## [lodash](https://github.com/lodash/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](https://github.com/ant-design/ant-design-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](https://github.com/mui-org/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](https://github.com/ElemeFE/element)
```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](https://github.com/reactivex/rxjs)
see [rxjs-webpack-treeshaking-example](https://github.com/Brooooooklyn/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
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/ts-import-plugin/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/ts-import-plugin/contribute)]
---
_Source: https://npm.io/package/ts-import-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._