babel-plugin-import

  1. Function: Loadbabel.antd.lodashAnd other modules, automatic import corresponding style and JS files

  2. 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.

  3. Use:

    • The installationnpm 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

  4. 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 dash

      import { TimePicker } from "antd"↓ ↓ ↓ ↓ ↓var _button = require('antd/lib/TimePicker');
Copy the code

    • "customName": Accepts a function

      When 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

  5. 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

  6. reference

Official documentation github.com/ant-design/…

Simple implementation of babel-plugin-import plugin juejin.cn/post/690570…