babel-plugin-lib-import v2.0.0

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。

插件选项

示例

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'
    }]
  ]
}