【前端工程化】对于@babel/traverse和AST的研究

通过AST解析reExport文件，生成组件和工具路径的json文件

reExport文件

export { default as Button } from './components/Button/';
export { default as Checkbox, CheckboxGroup } from './components/Checkbox';
export { default as Chip } from './components/Chip';
export { default as DatePicker } from './components/DatePicker';
export { default as Dialog } from './components/Dialog';
export { default as DragDropFileUpload } from './components/DragDropFileUpload';
export { default as DropdownButton } from './components/DropdownButton/';
...

 

path.js (可以放到其他文件里执行)

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;

const { writeFile, readFileSync } = require('fs');
const { resolve } = require('path');

const indexFile = readFileSync(resolve(__dirname, './index.js'), 'utf-8');
const ast = parser.parse(indexFile, {
  sourceType: 'module',
  plugins: ['jsx'],
});
const pathObj = {};
let route = null;

traverse(ast, {
  enter(path) {
    if (path.node.type === 'ExportSpecifier') {
      const {
        node: {
          exported: { name },
        },
      } = path;
      pathObj[name] =
        route[route.length - 1] === '/'
          ? route.substring(0, route.length - 1)
          : route;
    }
    if (path.node.type === 'ExportNamedDeclaration') {
      const {
        node: {
          source: { value },
        },
      } = path;
      route = value.replace('./', '');
    }
    if (
      path.node.type.indexOf('ExportSpecifier') < 0 &&
      path.node.type === 'ExportAllDeclaration'
    ) {
      const {
        node: {
          source: { value },
        },
      } = path;
      route = value;
      let rootRoute = null;
      const reExportFile = readFileSync(
        resolve(__dirname, `${route}/index.js`),
        'utf-8'
      );
      const reExportAST = parser.parse(reExportFile, {
        sourceType: 'module',
        plugins: ['jsx'],
      });
      traverse(reExportAST, {
        enter(path) {
          if (path.node.type === 'ExportSpecifier') {
            const {
              node: {
                exported: { name },
              },
            } = path;
            pathObj[name] =
              rootRoute[rootRoute.length - 1] === '/'
                ? rootRoute.substring(0, rootRoute.length - 1)
                : rootRoute;
          }
          if (path.node.type === 'ExportNamedDeclaration') {
            rootRoute = route;
            const {
              node: {
                source: { value },
              },
            } = path;
            rootRoute = `${rootRoute.replace('./', '')}${value.substring(1)}`;
          }
        },
      });
    }
  },
});

writeFile(
  resolve(__dirname, 'paths.json'),
  JSON.stringify(pathObj, null, '\t'),
  err => {
    if (err) throw new Error();
  }
);

path.json 放在src目录下

{
    "CoreConfig": "config",
    "prefixIt": "utilities",
    "errorMessage": "utilities",
    "useClickOutside": "hooks/useClickOutside",
    "useFocus": "hooks/useFocus",
    "useForceUpdate": "hooks/useForceUpdate",
    "useForkRef": "hooks/useForkRef",
    "usePrevious": "hooks/usePrevious",
    "useResizeObserver": "hooks/useResizeObserver",
    "useEventCallback": "hooks/useEventCallback",
    "useTabsLoop": "hooks/useTabsLoop",
    "useUncontrolled": "hooks/useUncontrolled",
    "useIsomorphicLayoutEffect": "hooks/useIsomorphicLayoutEffect",
    "Button": "components/Button",
    "Checkbox": "components/Checkbox",
    "CheckboxGroup": "components/Checkbox",
    "Chip": "components/Chip",
    "DatePicker": "components/DatePicker",
    "Dialog": "components/Dialog",
    "DragDropFileUpload": "components/DragDropFileUpload",
    "DropdownButton": "components/DropdownButton",
    "DropdownMenu": "components/DropdownMenu",
    "DropdownItem": "components/DropdownMenu",
    "Error": "components/Error",
    "FieldPicker": "components/FieldPicker",
    "FormControl": "components/FormControl",
    "FormInput": "components/FormInput",
    "Container": "components/Grid",
    "Row": "components/Grid",
    "Col": "components/Grid",
    "Visible": "components/Grid",
    "Hidden": "components/Grid",
    "ClearFix": "components/Grid",
    "ScreenClassRender": "components/Grid",
    "ScreenClassProvider": "components/Grid",
    "useScreenClass": "components/Grid",
    "GridLoader": "components/GridLoader",
    "Icon": "components/Icon",
    "IconDefinitions": "components/Icon",
    "IconNames": "components/Icon",
    "InlineMessageBlock": "components/InlineMessageBlock",
    "KeyboardCapture": "components/KeyboardCapture",
    "Link": "components/Link",
    "Matomo": "components/Matomo",
    "matomoMiddleware": "components/Matomo",
    "MatomoContext": "components/Matomo",
    "MatomoProvider": "components/Matomo",
    "useMatomo": "components/Matomo",
    "List": "components/List",
    "Item": "components/List",
    "ItemDivider": "components/List",
    "Modal": "components/Modal",
    "NavigableList": "components/NavigableList",
    "Popover": "components/PopoverModal",
    "PopoverDialog": "components/PopoverDialog",
    "ProgressSpinner": "components/ProgressSpinner",
    "Radio": "components/Radio",
    "RadioGroup": "components/Radio",
    "RedirectConfirmation": "components/RedirectConfirmation",
    "ReduxFormHelpers": "components/ReduxFormHelpers",
    "RichTextEditor": "components/RichTextEditor",
    "Select": "components/Select",
    "SplitButton": "components/SplitButton",
    "StyledIcon": "components/StyledIcon",
    "Svg": "components/Svg",
    "Tabs": "components/Tabs",
    "Tab": "components/Tabs",
    "TabList": "components/Tabs",
    "TabPanel": "components/Tabs",
    "Tags": "components/Tags",
    "TextArea": "components/TextArea",
    "TextInput": "components/TextInput",
    "TimePicker": "components/TimePicker",
    "toast": "components/ToastContainer",
    "ToastContainer": "components/ToastContainer",
    "Toggle": "components/Toggle",
    "Tooltip": "components/Tooltip",
    "Fade": "components/Transition",
    "Typeahead": "components/Typeahead",
    "TypeaheadBuilder": "components/TypeaheadBuilder",
    "VectorGraphic": "components/VectorGraphic",
    "ViewAllModal": "components/ViewAllModal",
    "ViewAll": "components/ViewAll",
    "Truncate": "components/Truncate",
    "Skeleton": "components/Skeleton"
}

读取JSON文件并使用

const data = readFileSync(
  path.resolve(
    __dirname,
    '../node_modules/react-core/dist/esm/paths.json'
  ),
  'utf-8'
);

  const libraryObject = JSON.parse(data);