Nutritious Pumpkin Masses

    babel-plugin-treasure

    0.9.0 • Public • Published

    babel-plugin-treasure

    Based on babel-plugin-import, we are committed to realizing the AST optimization requirements of the unified library and responding to the requirements of various AST node modification operations. Currently used in a unified and convenient way to solve the on-demand loading requirements of any component library

    Difference with babel-plugin-import

    Optimization points

    • No destructive changes, compatible with all APIs of the original babel-plugin-import
    • Support component name or method name size conversion
    • Support inputting custom path nodes in the form of objects
    • Support exporting components whose entry is part of the default attribute
    • Support react17+ jsx new conversion

    Fix point

    • Fixed the bug that babel-plugin-import did not convert the switch related AST tree

    Install

    // use npm
    npm i babel-plugin-treasure --save-dev
     
    // use yarn
    yarn add babel-plugin-treasure -D

    Usage

    Can be used in the following two ways

    Add to .babelrc or babel-loader.

    {
      "plugins": [["treasure", options]]
    }

    Configuration

    ʻOptions` can be an object.

    {
      "libraryName": "dt-react-component",
      "style": true, // or'css'
    }

    ʻOptions` can be an array, but it does not support setting in the babel@7+ environment

    [
      {
        libraryName: 'dt-react-component',
        style: true, // or'css'
      },
    ];

    ʻOptions` cannot be an array in the babel@7+ environment, but you can add a name to the plugin to support reuse.

    such as:

    // .babelrc
    "plugins": [
      ["import", {"libraryName": "dt-react-component", "libraryDirectory": "lib"}, "dtcomponent"],
      ["import", {"libraryName": "lodash", "libraryDirectory": "lib"}, "lodash"]
    ]

    Load libraries on demand

    When you simply import the library in the project, you only need to add the following configuration. For example, configure dt-react-component:

      "plugins": [
        [
          "treasure",
          {
            "libraryName": "dt-react-component",
            "libraryDirectory": "lib",
            "camel2DashComponentName": "lower",
            "style": "css"
          }
        ]
      ]

    Note: When you have multiple libraries in your development project that need to be loaded on demand, you can add an alias to distinguish it, for example, dt-react-component is used with antd:

      "plugins": [
        [
          "treasure",
          {
            "libraryName": "antd",
            "libraryDirectory": "lib",
            "style": "css"
          },
          "antd"
        ],
        [
          "treasure",
          {
            "libraryName": "dt-react-component",
            "libraryDirectory": "lib",
            "camel2DashComponentName": "lower",
            "style": "css"
          },
          "dt-react-component"
        ]
      ]

    API

    libraryName

    The name of the library needs to be imported as required, which is required.

    { "libraryName": "dt-react-component" }

    libraryDirectory

    Formulate the package format directory of the library, generally lib, es, esm, umd, etc., which are determined by the package developer. The default value of this option is lib

    { libraryDirectory: "lib" }

    style

    Do you need to load css files on demand, not enabled by default Note: Load the css precompiled file (less/scss) when the style is set to true, and load the css file when it is set to css.

    Load the css precompiled file:

    { libraryDirectory: true }

    Load the css file:

    { libraryDirectory: "css" }

    styleLibraryDirectory

    The library package for making css files, generally does not need to be written

    { styleLibraryDirectory: "lib" }

    camel2DashComponentName

    There are four parameters for the conversion of the component name, and the default is true. The conversion rules are as follows:

    import {ChromeDownload} from'dt-react-component'
     
          ↓ ↓ ↓ ↓ ↓ ↓
     
    // When camel2DashComponentName: true
    ChromeDownload → chrome-download
     
    // When camel2DashComponentName: false
    ChromeDownload → ChromeDownload // No changes
     
    // When camel2DashComponentName: "lower"
    ChromeDownload → chromeDownload // convert lower camel
     
    // When camel2DashComponentName: "upper"
    ChromeDownload → ChromeDownload // convert upper camel

    camel2UnderlineComponentName

    Handle multi-word components with _ for word segmentation

    import { ChromeDownload } from'dt-react-component'
     
          ↓ ↓ ↓ ↓ ↓ ↓
     
    ChromeDownload → chrome_download

    transformToDefaultImport

    Process the attributes of the default import library, the default is true. You can give an array, and the components in the array will not be exported in the default form. If your library is not imported by default at all, please set the option to false For example:

    // Set transformToDefaultImport: [ChromeDownload]
    import { ChromeDownload, Circle } from'dt-react-component'
     
          ↓ ↓ ↓ ↓ ↓ ↓
     
    import _Circle from "dt-react-component/lib/circle";
    import { ChromeDownload as _ChromeDownload } from "dt-react-component/lib/chromeDownload";

    customName

    Handle individual sequences with irregular rules, support function, object and path import

    // Function form
    [
      'import',
      {
        libraryName: 'dt-react-component',
        customName: (name: string) => {
          if (name === 'go-back') {
            return 'antd/lib/go-back';
          }
          return `antd/lib/${name}`;
        },
      },
    ];

    After processing, it will become like this

    import {GoBack} from "antd"
     
    ↓ ↓ ↓ ↓ ↓ ↓
     
    var _button = require('antd/lib/go-back');
    // Object form
    [
      'import',
      {
        libraryName: 'dt-react-component',
        customName: {
          GoBack: 'dt-react-component/lib/go-back',
        },
      },
    ];

    Note: When you use a function, the function parameter is the name converted by styleLibraryDirectory or camel2DashComponentName. When you use an object as a parameter, the key of the object will not undergo a special conversion. The same is true for customStyleName. In addition, you can also choose the reference path:

    // reference path
    [
      'import',
      {
        libraryName: 'dt-react-component',
        customName: {
          GoBack: require('path').resolve(__dirname, './customName.js'),
        },
      },
    ];

    customName.js is similar:

    module.exports = function customName(name) {
      return `dt-react-component/lib/${name}`;
    };

    customStyleName

    Same as customName, but used to process the style file path

    fileName

    Process links to specific files, such as:

    // Object form
    [
       "import",
         {
           "libraryName": "dt-react-component",
           "fileName": "example"
           "customName": {
              "GoBack": "dt-react-component/lib/go-back",
           }
         }
    ]

    The result after conversion is as follows:

    import {ChromeDownload} from'dt-react-component'
     
    ↓ ↓ ↓ ↓ ↓ ↓
     
    import'dt-react-component/lib/chrome-download/exmaple'

    Roadmap

    • Make timely updates with changes in various libraries
    • Support more AST type operations
    • Dynamic configuration of AST operation function type according to treasure IDE

    License

    MIT

    Keywords

    Install

    npm i babel-plugin-treasure

    DownloadsWeekly Downloads

    3

    Version

    0.9.0

    License

    ISC

    Unpacked Size

    126 kB

    Total Files

    104

    Last publish

    Collaborators

    • jiming2603
    • mortalyoung
    • small-nuo
    • liuxy0551
    • ziv
    • mumiao
    • jnjsxi
    • prof.bramble