invoker-ts-import-plugin
** Forked from Brooooooklyn/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'
orimport _ from 'lodash'
Why use this
transform such code:
into:
Usage
With ts-loader
//tsconfig.json ... "module": "ESNext" ...
// webpack.config.jsconst tsImportPluginFactory = moduleexports = // ... module: rules: test: /\.$/ loader: 'ts-loader' options: transpileOnly: true before: compilerOptions: module: 'es2015' exclude: /node_modules/ // ...
With awesome-typescript-loader ( >= 3.5.0 )
//tsconfig.json ... "module": "ESNext" ...
// webpack.config.jsconst tsImportPluginFactory = moduleexports = // ... module: rules: test: /\.tsx?$/ loader: 'awesome-typescript-loader' options: before: exclude: /node_modules/ // ...
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
-
resolveModule
string
default
undefined
important: specified node_modules directory path, Only support NODE_VERSION >= 8.9
example:
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
// with lesstransformerFactory// with csstransformerFactory// without styletransformerFactory
lodash
notice you should manual
import 'lodash/core'
in your project if your are usingimport { chain } from 'lodash'
.
transformerFactory
antd-mobile
// with css.webtransformerFactory // antd-mobile recently changed styleExt. If error occurs with prev, try next.transformerFactory
material-ui
transformerFactory // svg-iconstransformerFactory
element-ui
transformerFactory
RxJS
see rxjs-webpack-treeshaking-example for more details
only compatible for 5.5+
- RxJS v5:
transformerFactory
- RxJS v6:
transformerFactory