面试官：ui组件可以自动加载，那么业务组件可以吗？

最新推荐文章于 2024-09-14 16:36:41 发布

2401_84434442

最新推荐文章于 2024-09-14 16:36:41 发布

阅读量394

点赞数 3

分类专栏：程序员文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/2401_84434442/article/details/140400475

版权

程序员专栏收录该内容

189 篇文章 0 订阅

订阅专栏

动手

首先我们把所需要的包安装一下,我们先操作单个文件，

pnpm i @babel/parser @babel/generator @babel/traverse @babel/types vue-template-compiler glob
复制代码

生成 Map<componentName,componentPath>

我们项目的业务组件还比较规范（如果实在不规范，其实手动维护一下这个Map也工作量不大)，src/common/components有2个文件夹 basic 是基础组件，business里面是基于基础组件生成的业务组件，当然代码库内的代码都是随便写的，只是为了展示如何做自动加载组件

这一部分代码比较简单，引入fs，然后遍历文件夹就可以了


/**
 *
 * @param {s

**真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲**
**详情关注公中号【编程进阶路】**

tring} p 路径
 */
function resolve (p) {
  return path.resolve(__dirname, '..', p)
}
// 所有组件的组件的 名称和路径映射
const allComponentMaps = fs.readdirSync(resolve('src/common/components/basic')).reduce((prev, cur) => {
  // 我们项目不存在直接放外面的组件
  if (!cur.includes('.')) {
    prev[cur] = `@/common/components/basic/${cur}`
  }
  return prev
}, {})

fs.readdirSync(resolve('src/common/components/business')).reduce((prev, cur) => {
  // 我们项目不存在直接放外面的组件
  if (!cur.includes('.')) {
    prev[cur] = `@/common/components/business/${cur}`
  }
  return prev
}, allComponentMaps)

console.log(allComponentMaps)
复制代码

用nodemon运行这个js 可以得出如下结果

解析vue文件

首先准备一个app.vue内容如下

<template>
  <div id="app">
    <div id="nav">
      <s-input />
      <s-file />
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  components: {

  }
}
</script>
复制代码

首先通过fs模块得到源码的内容 content

// 目标文件
const targetFile = path.resolve(__dirname, './App.vue')

// 得到文件内容
const content = fs.readFileSync(targetFile).toString()
复制代码

然后编写一个方法解析html模板

/**
 *
 * @param {t.node} node
 * @param {Set} result
 */
function parseHTML (node, result = new Set()) {
  if (allComponentList.some(item => item === node.tag)) {
    result.add(node.tag)
  } else {
    (node.children || []).forEach(element => {
      parseHTML(element, result)
    })
  }
  return result
}

const result = parseHTML(compiler.compile(content).ast)
复制代码

可以看到控制台输出

得到当前文件使用了哪些业务组件后，接下来就是解析js，然后动态的import进去并注册就好了

借助一个网站我们可以知道直接import A from ‘b'中的A是 ImportDefaultSpecifier类型

通过看ast。我们可以得知一条import 语句是ImportDeclaration类型的，所以借助@babel/types 可以生成ImportDeclaration，

如何使用@babel/types 生成语句

我们使用 t 代表@babel/types
一个import 语句的type是ImportDeclaration 那么就调用 t.importDeclaration方法看api文档可以得知 t.importDeclaration 方法第一个入参就是ImportDefaultSpecifier类型 ImportDefaultSpecifier 可以借助t.importDefaultSpecifier方法生成

在入口文件生成imort 语句

/**
 *
 * @param {string} str
 * @returns
 */
function camelToStr (str) {
  return str.replace(/-([a-z])/g, function (all, letter) {
    return letter.toUpperCase()
  })
}
// 将用到的业务组件，并且没有引入的 引入一下
traverse(scriptAst, {
  Program (path, state) {


### 总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以**底层逻辑，基础知识要掌握好！**

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。



这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 **HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法**等高频考点**238道（含答案）**！  

资料截图 ：

![](https://img-blog.csdnimg.cn/img_convert/edeaa71cbc745698bdedcfe65be40387.png)

![](https://img-blog.csdnimg.cn/img_convert/981487b285a8b90918f35c830c299df8.png)



![](https://img-blog.csdnimg.cn/img_convert/9866daffbebcf87b44d9530a59427834.png)



**高级前端工程师必备资料包**  

![](https://img-blog.csdnimg.cn/img_convert/ba803e1b69e399b6739e3d33554d42a7.png)