2024年最全面试官：ui组件可以自动加载，那么业务组件可以吗？(1)，字节跳动技术总监自爆-CSDN博客

本文链接：https://blog.csdn.net/2401_84446548/article/details/138528647

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

解析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) {
    const node = path.node
    const body = node.body
    tempRes.forEach(componentName => {
      const importDefaultSpecifier = t.importDefaultSpecifier(t.identifier(camelToStr(componentName)))
      const importDeclaration = t.importDeclaration(
        [
          importDefaultSpecifier
        ],
        t.StringLiteral(allComponentMaps[componentName])
      )
      body.unshift(importDeclaration)
    })
  }
})

const sc = generator(scriptAst.program)
// 先随便生成到一个地方做测试
fs.writeFileSync(
  './a.vue',
  content.replace(
    /<script>([\s\S]+?)<\/script>/,
    `<script>\n${sc.code}\n</script>`
  )
)
复制代码

生成的效果图如下，我们可以明显看到需要引入的s-file 和 s-input都引入进来了