Babel-plugin-dynamic-import-builder NPM

babel-plugin-dynamic-import-builder

一个可以将指定组件挂载到 window 上的插件。可以使某些组件在运行时被替换。

如何使用

安装

$ npm i babel-plugin-dynamic-import-builder -D

配置

babel 参数

参数名	类型	必填	说明
redirectImports	ImportConfig[]	是	需要被替换组件的描述，参数见下表
filePath	string	否	临时文件生成的地址，默认为${process.cwd()}/temp.js
scopeName	string	否	被挂载在 window 上的变量默认为 global

ImportConfig

参数名	类型	必填	说明
componentName	string	是	需要被替换组件的名称
packageSource	string	是	需要被替换组件的 source
defaultImport	boolean	否	是否是 default 方式引入
scopeName	string	否	与上表中同名参数作用相同，但优先级更高

将它配置到 babel 插件中：

[
  'babel-plugin-dynamic-import-builder',
  {
    redirectImports: [
      {
        componentName: 'Dialog',
        packageSource: '@alifd/next',
      },
      {
        componentName: 'View',
        packageSource: 'rax-view',
        defaultImport: true,
      },
    ],
    filePath: 'filePath',
    scopeName: 'global',
  },
];

它做了什么

原始代码：

import { Dialog } from '@alifd/next';
import View from 'rax-view';

经过插件将会变为：

import { Dialog, View } from 'filePath';

filePath 的内容是：

import { Dialog as DialogDefault } from '@alifd/next';
import ViewDefault from 'rax-view';

export const Dialog = (window.global && window.global['Dialog']) || DialogDefault;
export const View = (window.global && window.global['ViewDefault']) || ViewDefault;

@infinitebrahmanuniverse/nolb-babel-plugin-d @everything-registry/sub-chunk-1202 @zalastax/nolb-babel-plugin-d

1.0.1

2 years ago

1.0.0

2 years ago