babel-plugin-import-muc

小雨伞按需加载的babel插件,支持UI库及JS库的按需加载。

例子

{ "libraryName": "actui" }

import { button } from 'actui';
      ↓ ↓ ↓ ↓ ↓ ↓
var button = require('actui/lib/button').default

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

import { button } from 'actui';
      ↓ ↓ ↓ ↓ ↓ ↓
var button = require('actui/lib/button').default
require('actui/lib/button/style.css')

{ "libraryName": "actui", style: true, ignore: ["button"] }

import { button } from 'actui';
      ↓ ↓ ↓ ↓ ↓ ↓
var button = require('actui/lib/button').default

注意：当配置style:true时，会默认import组件下对应的样式文件，如果配置了ignore，则会忽略改组件的样式。 使用场景多用于UI库中，部分jsapi不需要样式时。

{ "libraryName": "actui", "includeStyle": ["bScroll"] }

import { bScroll } from 'actui';
      ↓ ↓ ↓ ↓ ↓ ↓
var bScroll = require('actui/lib/bScroll').default
require('actui/lib/bScroll/style.css')

注意：当不配置style:true时includeStyle才会生效。 使用场景多用于JS库中，部分jsapi需要依赖样式时。

{ "libraryName": "actui", "transformToDefaultImport":false }

import { bScroll } from 'actui'
      ↓ ↓ ↓ ↓ ↓ ↓
var bScroll = require('actui/lib/bScroll')

注意：当引用的模块没有暴露default时，设置为false。transformToDefaultImport默认值为true。

{ "libraryName": "actui", "libraryDirectory":"test" }

import { bScroll } from 'actui';
      ↓ ↓ ↓ ↓ ↓ ↓
var bScroll = require('actui/test/bScroll').default

注意：配置lib库的目录，默认值为'lib'。

使用

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

通过 .babelrc or babel-loader 配置

{
  "plugins": [
    ["import-muc", options]
    ...
  ]
}

options

{
  "libraryName": "actui",
  "libraryDirectory":"library",
  "style":true,
  "ignore":[],
  "includeStyle":[],
  "transformToDefaultImport":false
}

参考文档

babel-handbook