babel-plugin-import-muc

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


建议使用babel-plugin-import替代
``shell
npm i babel-plugin-import -D
`
`javascript
// babel.config.js
module.exports = {
//....
plugins: [
// 按需引入用
['import', {
'libraryName': '@xysfe/actui',
'libraryDirectory': 'es',
'camel2DashComponentName': false,
'style': (name, file) => {
if (['@xysfe/actui/es/FaceRecognition', '@xysfe/actui/es/FileUpload'].includes(name)) {
return false
}
return ${name}/style.css
}
}, '@xysfe/actui']
]
}
`
----

例子

#### { "libraryName": "actui" }

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

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

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

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

`javascript
import { button } from 'actui';
↓ ↓ ↓ ↓ ↓ ↓
var button = require('actui/lib/button').default
`
注意：当配置style:true时，会默认import组件下对应的样式文件，如果配置了ignore，则会忽略改组件的样式。
使用场景多用于UI库中，部分jsapi不需要样式时。

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

`javascript
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 }

`javascript
import { bScroll } from 'actui'
↓ ↓ ↓ ↓ ↓ ↓
var bScroll = require('actui/lib/bScroll')
`
注意：当引用的模块没有暴露default时，设置为false。transformToDefaultImport默认值为true。

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

`javascript
import { bScroll } from 'actui';
↓ ↓ ↓ ↓ ↓ ↓
var bScroll = require('actui/test/bScroll').default
`
注意：配置lib库的目录，默认值为'lib'。

使用

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

通过 .babelrc or babel-loader 配置

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

$3

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

$3

babel-handbook