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:

1import { Alert, Card as C } from 'antd'

into:

1import Alert from 'antd/lib/alert'
2import 'antd/lib/alert/style/index.less'
3import { default as C } from 'antd/lib/card'
4import 'antd/lib/card/style/index.less'

Usage

With ts-loader

1//tsconfig.json
2{
3  ...
4  "module": "ESNext",
5  ...
6}

1// webpack.config.js
2const tsImportPluginFactory = require('ts-import-plugin')
3
4module.exports = {
5  // ...
6  module: {
7    rules: [
8      {
9        test: /\.(jsx|tsx|js|ts)$/,
10        loader: 'ts-loader',
11        options: {
12          transpileOnly: true,
13          getCustomTransformers: () => ({
14            before: [tsImportPluginFactory(/** options */)],
15          }),
16          compilerOptions: {
17            module: 'es2015',
18          },
19        },
20        exclude: /node_modules/,
21      },
22    ],
23  },
24  // ...
25}

With awesome-typescript-loader ( >= 3.5.0 )

1//tsconfig.json
2{
3  ...
4  "module": "ESNext",
5  ...
6}

1// webpack.config.js
2const tsImportPluginFactory = require('ts-import-plugin')
3
4module.exports = {
5  // ...
6  module: {
7    rules: [
8      {
9        test: /\.tsx?$/,
10        loader: 'awesome-typescript-loader',
11        options: {
12          getCustomTransformers: () => ({
13            before: [tsImportPluginFactory(/** options */)],
14          }),
15        },
16        exclude: /node_modules/,
17      },
18    ],
19  },
20  // ...
21}

With rollup

1import typescript from 'rollup-plugin-typescript2' // or '@rollup/plugin-typescript'
2import createTransformer from 'ts-import-plugin'
3
4const transformer = createTransformer({
5  libraryDirectory: 'es',
6  libraryName: 'antd',
7  style: true,
8})
9
10export default {
11  input: `./test/fixtures/index.tsx`,
12  plugins: [
13    typescript({
14      clean: true,
15      transformers: [
16        () => ({
17          before: transformer,
18        }),
19      ],
20    }),
21  ],
22  output: [
23    {
24      file: `./dist/rollup.dist.js`,
25      format: 'esm',
26    },
27  ],
28}

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:

1tsImportPluginFactory({
2  libraryName: 'antd',
3  libraryDirectory: 'lib',
4  style: true,
5})

1{
2  libraryName: '@material-ui/core',
3  libraryDirectory: '',
4  camel2DashComponentName: false
5}

options can be an array:

example:

1;[
2  {
3    libraryName: 'antd',
4    libraryDirectory: 'lib',
5    style: true,
6  },
7  {
8    libraryName: '@material-ui/core',
9    libraryDirectory: '',
10    camel2DashComponentName: false,
11  },
12]

Compatible libs:

ant-design

1const transformerFactory = require('ts-import-plugin')
2// with less
3transformerFactory({ style: true })
4// with css
5transformerFactory({ style: 'css' })
6// without style
7transformerFactory()

lodash

notice you should manual import 'lodash/core' in your project if your are using import { chain } from 'lodash' .

1transformerFactory({
2  style: false,
3  libraryName: 'lodash',
4  libraryDirectory: null,
5  camel2DashComponentName: false,
6})

antd-mobile

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

material-ui

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

1transformerFactory({
2  libraryName: '@material-ui/core',
3  libraryDirectory: '',
4  camel2DashComponentName: false,
5})
6
7// svg-icons
8transformerFactory({
9  libraryDirectory: (importName) => {
10    const stringVec = importName
11      .split(/([A-Z][a-z]+|[0-9]*)/)
12      .filter((s) => s.length)
13      .map((s) => s.toLocaleLowerCase())
14
15    return stringVec.reduce((acc, cur, index) => {
16      if (index > 1) {
17        return acc + '-' + cur
18      } else if (index === 1) {
19        return acc + '/' + cur
20      }
21      return acc + cur
22    }, '')
23  },
24  libraryName: '@material-ui/icons',
25  style: false,
26  camel2DashComponentName: false,
27})

element-ui

1import { Button } from 'element-ui'

1transformerFactory({
2  libraryName: 'element-ui',
3  libraryDirectory: 'lib',
4  camel2DashComponentName: true,
5  style: (path: string) => join('element-ui', 'lib', 'theme-chalk', `${camel2Dash(basename(path, '.js'))}.css`),
6})

RxJS

see rxjs-webpack-treeshaking-example for more details

only compatible for 5.5+

• RxJS v5:

1transformerFactory({
2  libraryDirectory: '../_esm2015/operators',
3  libraryName: 'rxjs/operators',
4  style: false,
5  camel2DashComponentName: false,
6  transformToDefaultImport: false,
7})

• RxJS v6:

1transformerFactory([
2  {
3    libraryDirectory: '../_esm5/internal/operators',
4    libraryName: 'rxjs/operators',
5    camel2DashComponentName: false,
6    transformToDefaultImport: false,
7  },
8  {
9    libraryDirectory: '../_esm5/internal/observable',
10    libraryName: 'rxjs',
11    camel2DashComponentName: false,
12    transformToDefaultImport: false,
13  },
14])

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]