感谢babel-plugin-import
Modular import plugin for babel
Example
Converts
; ReactDOM;
(roughly) to
var _button = ; ReactDOM;
Usage
npm install babel-plugin-import-resolve --save-dev
Via .babelrc
or babel-loader.
"plugins": "import-resolve" options
options
options
can be object.
"libraryName": "antd" "style": true // or 'css'
"libraryName": "material-ui" "libraryDirectory": "components" // default: lib
options
can be an array.
For Example:
"libraryName": "antd" "libraryDirectory": "lib" // default: lib "style": true "libraryName": "antd-mobile" "libraryDirectory": "component"
支持的模块名字的规则
默认的babel-plugin-import支持的模块名字的规则是 camel2DashComponentName或者camel2UnderlineComponentName
常常我们的命名风格并不完全符合这两种规则,所有我们改进支持自定义的模块命名风格,如:
//.babelrc "plugins": "import-resolve" "libraryName": "qmkit" "libraryDirectory": "" // default: lib "libraryName": "qmkit" "libraryDirectory": "" "moduleResolver": "noop": "path": "noop" "type": "default" "_": "path": "common/util" "type": "*" "AsyncRouter": "path": "async-router" "type": "default" "routeWithSubRoutes": "path": "route-with-subroutes" "type": "default" "Api": "path": "api" "type": "*" "Alert": "path": "modal" "type": "Alert" }
(roughly) to
配合typescript的使用
//tsconfig.json "compilerOptions": "module": "es2015" //不能使用commonjs "target": "es6" "allowSyntheticDefaultImports": true "moduleResolution": "node" }