Skip to content

GitLab

Closed
Created by liuyajun@liuyajunMaintainer

vue PC组件平台，插槽注释丢失问题

问题

vue PC 组件平台在发到线上后，自动解析出来的插槽部分文档内容中，注释和内容部分空白 image

排查过程

猜测

  • 是否代码问题
    • 没问题
  • 是否在项目内解析过程做了环境判断（process.env.npm_config_env），因为只在 npm run build 阶段发生
    • 没有环境判断
  • @vuedoc/parser 源码内部是否有环境相关的判断
    • 没有

调试

  1. 通过本地运行 开发、生产 的脚本做对比，发现在 @vuedoc/parser 解析之后，slots 字段内的 description 为空
  2. 进入 @vuedoc/parser 调试发现在 findComment 的解析结果有差别
  3. 以 node 为 bottom 为例
    • 生产环境，token.attrsList 没有 start、end，所以无法截取到注释代码
  4. 按顺序进入到以下文件函数
    • node_modules/@vuedoc/parser/lib/parser/MarkupTemplateParser.js => constructor => options => preTransformNode
    • preTransformNode 接收到的 node 就已经不带 start、end 了
    • 而这个方法是在 parse 中，通过 vue-template-compiler 的 compile(this.source, this.options); 调用
  5. 进入到 vue-template-compiler 进行调试排查
    • node_modules/vue-template-compiler/build.js 中 preTransforms = pluckModuleFunction(options.modules, 'preTransformNode');
  6. 跟踪 preTransforms，element = preTransforms[i](element, options) || element; 中的 element 在生产环境中是没有 start 
      // apply pre-transforms
  for (var i = 0; i < preTransforms.length; i++) {
    element = preTransforms[i](element, options) || element;
  }
  7. 往上追溯 element 被赋值或者修改的地方，在 parseHTML 函数内出现了环境判断，start$1 在任何环境都是能拿到的，但是在开发环境才进行赋值 
      if (process.env.NODE_ENV !== 'production') {
    if (options.outputSourceRange) {
      element.start = start$1;
      element.end = end;
      element.rawAttrsMap = element.attrsList.reduce(function (cumulated, attr) {
        cumulated[attr.name] = attr;
        return cumulated
      }, {});
    }

解决方法

在 prebuild 阶段执行解析文件，不要放在 build 脚本内