【前端工程化】通过babel-plugin-import库实现组件库import 按需加载


此库是Ant-Design发布的按需加载和引入样式的babel库,但是其他的组件也可以使用

通过阅读源码

const path = winPath(
        this.customName
          ? this.customName(transformedMethodName, file)
          : join(this.libraryName, libraryDirectory, transformedMethodName, this.fileName), // eslint-disable-line

发现可以不走libraryDirectory自定义任意路径

结合README使用

[
  "import",
    {
      "libraryName": "antd",
      "customName": (name: string, file: object) => {
        const filename = file.opts.filename;
        if (name === 'TimePicker'){
          return 'antd/lib/custom-time-picker';
        }
        if (filename.indexOf('/path/to/my/different.js') >= 0) {
          return 'antd/lib/custom-name';
        }
        return `antd/lib/${name}`;
      }
    }
]