npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

babel-plugin-import-custom

v0.0.7

Published

Component modular import plugin for babel.

Downloads

9

Readme

babel-plugin-import-custom

customized for iview, and keep the original function unchanged.

主要改动点:

  • import iView from 'iview',在参数load设置成'auto'后,可自动把iview所有组件按照按需引入的方式全部引入,见下例

  • import { Circle, Table } from 'iview',在参数load设置成'auto'后,可自动将两个组件按Vue.component方式引入,见下例

  • 当libraryName为iview时,style设置成css或true,不能按需引入样式,只能全量引入

打包大小对比图(都引入了vue及相关loader、template-loader)

| 全量引入 | 按需引入(Button, Table) | 按需引入(Button) | 按需引入全部组件 | | -------- | :----: | :----: | :----: | | 634 KiB | 169 KiB | 73.4 KiB | 501 KiB |

Modular import plugin for babel, compatible with iview antd, antd-mobile, lodash, material-ui, and so on.

NPM version Build Status


Why babel-plugin-import-custom

Where to add babel-plugin-import-custom

Example

{ "libraryName": "iview", "load": 'auto', "style": 'css' }

import { Circle, Table } from 'iview';

      ↓ ↓ ↓ ↓ ↓ ↓
      
import _Table from "iview/src/components/table";
import _Circle from "iview/src/components/circle";
Vue.component("iCircle", _Circle);
Vue.component("iTable", _Table);
Vue.component("Table", _Table);
import "iview/dist/styles/iview.css";

{ "libraryName": "iview", "load": 'auto', "style": true }

import { Circle, Table } from 'iview';

      ↓ ↓ ↓ ↓ ↓ ↓
      
import _Table from "iview/src/components/table";
import _Circle from "iview/src/components/circle";
Vue.component("iCircle", _Circle);
Vue.component("iTable", _Table);
Vue.component("Table", _Table);
import "iview/src/styles/index.less";

{ "libraryName": "iview", "load": 'auto', "style": true }

import iView from 'iview';

      ↓ ↓ ↓ ↓ ↓ ↓
      
// 引入全量的组件
import _Table from "iview/src/components/table";
import _Circle from "iview/src/components/circle";
// ...
import Switch from "iview/src/components/switch";
Vue.component("iCircle", _Circle);
Vue.component("iTable", _Table);
Vue.component("Table", _Table);
// ... 
Vue.component("iSwitch", Switch);
import "iview/src/styles/index.less";

{ "libraryName": "iview", "style": true }

import iView from 'iview'
Vue.use(iView)

      ↓ ↓ ↓ ↓ ↓ ↓
      
import iView from 'iview'
Vue.use(iView)
import "iview/src/styles/index.less";

{ "libraryName": "iview", "style": true }

import { Circle, Table } from 'iview'
Vue.component('iCircle', Circle)

      ↓ ↓ ↓ ↓ ↓ ↓
      
import _Circle from "iview/src/components/circle";
import "iview/src/styles/index.less";\nVue.component(\'iCircle\', _Circle);'

{ "libraryName": "iview", "style": true }

import { Circle, Table } from 'iview'

      ↓ ↓ ↓ ↓ ↓ ↓
      
import "iview/src/styles/index.less";

{ "libraryName": "antd" }

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓
      
var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);

{ "libraryName": "antd", style: "css" }

当libraryName为iview时,style设置成css或true,不能按需引入样式,只能全量引入

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓
      
var _button = require('antd/lib/button');
require('antd/lib/button/style/css');
ReactDOM.render(<_button>xxxx</_button>);

{ "libraryName": "antd", style: true }

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓
      
var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);

Note : with style: true css source files are imported and optimizations can be done during compilation time. With style: "css", pre bundled css files are imported as they are.

style: true can reduce the bundle size significantly, depending on your usage of the library.

Usage

npm install babel-plugin-import-custom --save-dev

Via .babelrc or babel-loader.

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

options

options can be object.

{
  "libraryName": "antd",
  "style": true,   // or 'css'
}
{
  "libraryName": "lodash",
  "libraryDirectory": "",
  "camel2DashComponentName": false,  // default: true
}
{
  "libraryName": "@material-ui/core",
  "libraryDirectory": "components",  // default: lib
  "camel2DashComponentName": false,  // default: true
}

~options can be an array.~ It's not available in babel@7+

For Example:

[
  {
    "libraryName": "antd",
    "libraryDirectory": "lib",   // default: lib
    "style": true
  },
  {
    "libraryName": "antd-mobile"
  },
]

Options can't be an array in babel@7+, but you can add plugins with name to support multiple dependencies.

For Example:

// .babelrc
"plugins": [
  ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"],
  ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"]
]

style

  • ["import", { "libraryName": "antd" }]: import js modularly
  • ["import", { "libraryName": "antd", "style": true }]: import js and css modularly (LESS/Sass source files)
  • ["import", { "libraryName": "antd", "style": "css" }]: import js and css modularly (css built files)

If option style is a Function, babel-plugin-import-custom will auto import the file which filepath equal to the function return value. This is useful for the components library developers.

e.g.

  • ["import", { "libraryName": "antd", "style": (name) => `${name}/style/2x` }]: import js and css modularly & css file path is ComponentName/style/2x

If a component has no style, you can use the style function to return a false and the style will be ignored.

e.g.

[
  "import", 
    { 
      "libraryName": "antd", 
      "style": (name: string, file: Object) => {
        if(name === 'antd/lib/utils'){
          return false;
        }
        return `${name}/style/2x`;
      }
    }
]

customName

We can use customName to customize import file path.

For example, the default behavior:

import { TimePicker } from "antd"
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/time-picker');

You can set camel2DashComponentName to false to disable transfer from camel to dash:

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

And finally, you can use customName to customize each name parsing:

[
  "import", 
    { 
      "libraryName": "antd", 
      "customName": (name: string) => {
        if (name === 'TimePicker'){
          return 'antd/lib/custom-time-picker';
        }
        return `antd/lib/${name}`;
      }
    }
]

So this result is:

import { TimePicker } from "antd"
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/custom-time-picker');

transformToDefaultImport

Set this option to false if your module does not have a default export.

Note

babel-plugin-import-custom will not work properly if you add the library to the webpack config vendor.