babel-plugin-smart-import
This plugin is used for import file on demand loading.
Install
npm install -D babel-plugin-smart-import
Usage
Use for lodash
babel.config.js
var plugins = 'babel-plugin-smart-import' library: 'lodash' namingRule: 'little-camel' // use lodash/xxXX ;
app.js
;; ↓var _indexOf = ;;
Use for antd
babel.config.js
var plugins = 'babel-plugin-smart-import' library: 'antd' directory: 'lib' namingRule: 'dash' // use ant/lib/xxx-xxx folder style: // import style file directory: 'style' namingRule: 'index' // use ant/lib/xxx/style/index file ext: 'css' // js, css or less are all supported. ;
app.jsx
;ReactDOM; ↓;var _button = ;ReactDOM;
Use for antd-mobile
babel.config.js
var plugins = 'babel-plugin-smart-import' library: 'antd-mobile' directory: 'lib' namingRule: 'dash' // use for ant/lib/xxx-xxx folder style: directory: 'style' namingRule: 'index' // use for ant/lib/xxx/style/index file ext: 'css' // js, css or less are all supported. ;
app.jsx
;ReactDOM; ↓;var _button = ;ReactDOM;
Use for @material-ui/core
babel.config.js
var plugins = 'babel-plugin-smart-import' library: '@material-ui/core' ;
app.jsx
;ReactDOM; ↓var _button = ;ReactDOM;
Use for reactstrap
babel.config.js
var plugins = 'babel-plugin-smart-import' library: 'reactstrap' directory: 'lib' ;
app.jsx
;ReactDOM; ↓var _button = ;ReactDOM;
Use multiple plugins
babel.config.js
var plugins = 'babel-plugin-smart-import' library: '@material-ui/core' '@material-ui/core' // just add unique name 'babel-plugin-smart-import' library: 'reactstrap' directory: 'lib' 'reactstrap' // just add unique name;
function namingRule
var plugins = 'babel-plugin-smart-import' library: 'reactstrap' directory: 'lib' { return name === 'Button' ? name : 'dash'; // you can return 'little-camel', 'big-camel', 'dash' or 'underline' also. } ;
Options
library directory namingRule importDefault style: directory namingRule ext
library
String, this option is required.
Set library name.
directory
String, default to null.
Set components directory.
namingRule
'little-camel', 'big-camel', 'dash', 'underline' or custom function, default to 'big-camel'.
Set component naming rule(folder or file).
'little-camel' -> componentName
'big-camel' -> ComponentName
'dash' -> component-name
'underline' -> component_name
function -> name => newName
importDefault
Boolean, default to true.
Transform import type to default, false means addNamed.
// true;// false;
style
Boolean or Object, default to false.
Import related style file.
style.directory
String, default to components directory.
Set styles directory. if start with '/' then style.directory will append to library otherwise append to component folder.
style.namingRule
'little-camel', 'big-camel', 'dash', 'underline', specific name(like 'index') or function, default to null.
Set style naming rule(folder or file).
style.ext
String, e.g. 'css', 'less', 'sass' or 'js', default to null.
Set style file's extension. if this option is specific, then style.namingRule is files.
FAQ
Cannot read property 'path' of null
Question
var identifierName = thisreplacepath$$1nodename; ^TypeError: Cannot read property 'path' of null
Answer
clean babel cache.
babel.config.js
api; // set cache to false.
webpack.config.js
rules: test: /\.?$/ exclude: /node_modules/ use: loader: 'babel-loader' options: cacheDirectory: false // set cacheDirectory to false. ...