babel-plugin-import
-
Function: Load
babel
.antd
.lodash
And other modules, automatic import corresponding style and JS files -
Scene:
To use ANTD, you need to load the component styles antD /dist/ ANTD.css, but most of the time you don’t need to use all antD components, let alone load the styles of all components.
So ANTD provides on-demand import
import Button from 'antd/lib/button'; import 'antd/lib/button/style'; Copy the code
Babel-plugin-import helps us automatically load styles when importing components.
-
Use:
- The installation
npm install babel-plugin-import --save-dev
// .babelrc { "plugins":[ [ "import", option ] ] } // To implement multiple imports, you can add multiple import configuration arrays // .babelrc { "plugins": [["import", { "libraryName": "antd"."libraryDirectory": "lib" }, "antd" ], [ "import", { "libraryName": "antd-mobile"."libraryDirectory": "lib" }, "antd-mobile"]]}Copy the code
- The installation
-
Configuration options:
Option must be an object
-
"libraryName"
: The name of the loaded library -
"libraryDirectory"
:Import the library relative to its package.json directory, the main option in package.json, which defaults to lib.
-
"style"
:-
“True “: modularized import js and CSS/less/sass source files
It can be optimized at compile time, greatly reducing the packaging volume, depending on usage
-
“CSS” modular import JS and CSS, library pre-built CSS files will be imported as is
-
Function: When passed as a Function, import the file whose filepath equals the value returned by the Function. When the value returned is false, import no file
This is very useful if you need to write your own plug-in
[ "import", { "libraryName": "antd"."style": (name: string, file: Object) => { if(name === 'antd/lib/utils'){ return false; } return `${name}/style/2x`; }}]Copy the code
-
-
"styleLibraryDirectory"
: the defaultnull
, the file path for reference styles,The original style will be ignored. Used to set the theme
{ "libraryName": "element-ui"."styleLibraryDirectory": "lib/theme-chalk",}import { Button } from 'element-ui'; ↓ ↓ ↓ ↓ ↓var _button = require('element-ui/lib/button'); require('element-ui/lib/theme-chalk/button'); Copy the code
-
"camel2DashComponentName"
: the defaulttrue
, convert the hump into a dashimport { TimePicker } from "antd"↓ ↓ ↓ ↓ ↓var _button = require('antd/lib/TimePicker'); Copy the code
-
"customName"
: Accepts a functionWhen we set “camel2DashComponentName” to false, we can customize the import file name.
[ "import", { "libraryName": "antd"."customName": (name: string, file: object) = > { const filename = file.opts.filename; if (name === 'TimePicker') {return 'antd/lib/custom-time-picker'; } if (filename.indexOf('/path/to/my/different.js') > =0) { return 'antd/lib/custom-name'; } return `antd/lib/${name}`; }}]Copy the code
In some cases, the converter will serialize the configuration file to an object (like json.parse), serializing properties that do not receive function values, resulting in the loss of the customName
So we can use javascript source file paths to avoid loss:
The path module is called first to handle the path
[ "import", { "libraryName": "antd"."customName": require('path').resolve(__dirname, './customName.js')}]Copy the code
Second, when the module is exported
module.exports = function customName(name) { return `antd/lib/${name}`; }; Copy the code
-
"customStyleName"
: used to process style filescustomName
-
"transformToDefaultImport"
: If the packaged module is not exported by default, set it tofalse
-
-
Matters needing attention
Babel-plugin-import will not work properly if the library is added to the configuration file of the WebPack third-party library
-
reference
Official documentation github.com/ant-design/…
Simple implementation of babel-plugin-import plugin juejin.cn/post/690570…