babel-plugin-lib-import

一个能实现按需引入lib文件的babel插件。

lib类似下面的结构

|-- libName
    |-- lib                         // 构建后的目录
    |   |-- index.js                // package.json指定的入口文件
    |   |-- components
    |   |   |-- city-picker
    |   |   |   |-- index.js
    |   |   |-- cutover
    |   |   |   |-- index.js
    |   |   |   |-- style
    |   |   |       |-- default.js  // 样式文件，引入即可，不需要做任何处理
    |   |   |       |-- dark.js
    |   |   |-- dialog
    |   |   |   |-- index.js
    |   |   |   |-- style
    |   |   |       |-- default.js
    |   |   |       |-- dark.js
    |   |-- tools
    |       |-- easing
    |       |   |-- index.js
    |       |-- prefix
    |       |   |-- index.js
    |-- src
        |-- index.js
        |-- components
        |   |-- city-picker
        |   |   |-- README.md
        |   |   |-- index.vue               // 该组件没有皮肤样式
        |   |-- cutover
        |   |   |-- README.md
        |   |   |-- index.vue
        |   |   |-- style
        |   |       |-- default.less        // 默认皮肤，皮肤样式文件格式为skinname.less
        |   |       |-- dark.less           // dark皮肤
        |   |-- dialog
        |   |   |-- README.md
        |   |   |-- index.vue
        |   |   |-- style
        |   |       |-- default.less        // 默认皮肤
        |   |       |-- dark.less           // dark皮肤
        |-- tools
            |-- easing
            |   |-- README.md
            |   |-- index.js                // export多个变量
            |-- prefix
            |   |-- README.md
            |   |-- index.js

工作原理

import { Dialog, Cutover, SineEaseIn, SineEaseOut } from 'libName'

会被转换成

import { default as Dialog } from '/xxx/xx/libName/lib/components/dialog/index.js'
import { default as Cutover } from '/xxx/xx/libName/lib/components/cutover/index.js'
import { SineEaseIn, SineEaseOut } from '/xxx/xx/libName/lib/tools/easing/index.js'
import '/xxx/xx/libName/lib/components/dialog/style/default.js'
import '/xxx/xx/libName/lib/components/cutover/style/default.js'

插件会从lib的package.json里找到入口文件，并解析入口文件获取相关的import、export信息，然后跟项目中用到的import信息作比较，转换成最终的按需加载语法。

插件还能加载皮肤，原理是针对所有加载的lib里的文件，判断同级目录是否存在style目录以及style目录内是否存在对应的皮肤文件，如果存在就导入。默认皮肤名为default。

插件选项

| 名称 | 类型 | 必填 | 默认值 | 描述 | | :---: | :-------------------------: | :---: | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | name | String | Y | - | lib名称 | | path | String | N | - | lib目录绝对路径，插件默认是在引用lib的源文件所在路径使用require.resolve来定位lib目录的，但有可能webpack中使用了alias等特性，导致require.resolve解析的路径不对，这时候就需要手动配置path来明确指定lib目录 | | skin | String&#124;Array<String> | N | default | 皮肤名称，none表示不加载任何皮肤的样式文件，all表示加载所有皮肤的样式文件，字符串表示只加载特定皮肤的样式文件，数组表示加载所有指定皮肤的样式文件 |

示例

babel.config.js

module.exports = {
  presets: [
    ...
  ],
  plugins: [
    ['lib-import', {
      name: 'my-lib',
      skin: 'my-skin'
    }],
    ['lib-import', {
      name: 'my-lib2',
      path: '/xxx/xxx/my-lib2',
      skin: 'my-skin'
    }]
  ]
}