babel-plugin-import TypeScript version
npm install 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'
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'
`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/,
},
],
},
// ...
}
`
`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/,
},
],
},
// ...
}
`
`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,./dist/rollup.dist.js
plugins: [
typescript({
clean: true,
transformers: [
() => ({
before: transformer,
}),
],
}),
],
output: [
{
file: ,`
format: 'esm',
},
],
}
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.import { foo } from 'Bar'
e.g. If you have , 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 theFooBar
component name from camelCase to dashed. e.g. gets transformed to foo-bar
default true
- camel2UnderlineComponentName boolean - Builtin method to use to transform the component name. This does transform theFooBar
component name from camelCase to snake_case. e.g. gets transformed to foo_bar
default false
- libraryOverride boolean - Setting to false (default) prepends the libraryName to the libraryDirectory (with a path separator)libraryDirectory
set to true if you want to use the 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,
},
]
`ts`
const transformerFactory = require('ts-import-plugin')
// with less
transformerFactory({ style: true })
// with css
transformerFactory({ style: 'css' })
// without style
transformerFactory()
> 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,
})
`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' })
`
`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,
})
`
`ts`
import { Button } from 'element-ui'
`ts${camel2Dash(basename(path, '.js'))}.css
transformerFactory({
libraryName: 'element-ui',
libraryDirectory: 'lib',
camel2DashComponentName: true,
style: (path: string) => join('element-ui', 'lib', 'theme-chalk', ),`
})
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,
},
])
This project exists thanks to all the people who contribute. [Contribute].
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]