草庐IT

javascript - 我可以在未注册的组件上构建 Vue.js 失败吗？

coder 2024-07-19 原文

考虑以下组件模板...

<template>
  <Unknown></Unknown>
</template>

...其中 Unknown 可能 是全局注册的组件。在运行时，我会遇到这个信息性错误:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[...]

但是，对于我的用例，我想强制在构建时不会发生此类事件。目前，vue-cli-service build在这种情况下执行成功构建，然后在运行时显示错误(此时无用)。

我很好奇是否有一种方法可以内省(introspection)地捕获这个潜在问题并强制构建失败。我希望发现一个 --strict 标志(或类似标志)来禁止此类情况。

我什至尝试过 template-compiler和 component-compiler看看我是否可以通过人工检查发现它，令人震惊的是没有报告任何错误。

有什么想法吗？

这是我提到的更详细的实验，使用更低的级别 component-compiler-utils .这应该是可移植的以观察相同的结果。请注意两个错误报告字段是如何为空的!

"dependencies": {
  "@vue/component-compiler-utils": "3.0.0",
  "vue-template-compiler": "2.6.10"
}
[...]

const ccu = require('@vue/component-compiler-utils');
const vtc = require('vue-template-compiler');

const file = `
<template>
  <div class="component">
    <Unknown></Unknown>
  </div>
</template>

<script>
  export default {
    name: 'Component',
    data: function () {
      return {}
    },
  }
</script>

<style scoped lang="scss">
  .component {
    width: 100px;
    height: 100px;
  }
</style>
`;

const parsed = ccu.parse({
  compiler: vtc,
  source: file,
  needMap: false
});

const compiled = ccu.compileTemplate({
  compiler: vtc,
  source: parsed.template.content,
});

console.log('parsed | errors', parsed.errors);     // [] empty!
console.log('compiled | tips', compiled.tips);     // [] empty!
console.log('compiled | errors', compiled.errors); // [] empty!

最佳答案

很遗憾地说，我认为答案是这是不可能的。请查看Component Registration与我的解释相关的背景信息的文档部分。

开始于:

  1. 组件可以在 Vue 应用程序的生命周期内随时动态注册 (Vue.component('MyComponent', {/* ... */})。
  2. 组件可以通过插件添加，甚至可以在初始化后异步添加。
  3. 组件可以是used dynamically .
  4. 组件名称是简单的字符串，而不是某种形式的枚举或应用程序中允许名称的等效“固定”注册表。

代码分析器没有通用的方法来实现您的要求。考虑到上述情况，您尝试的所有选项均未报告错误，我并不感到惊讶。事实上，相反的情况会令人惊讶，因为它不适用于插件注册的组件。实际上，没有其他方法可以在运行时之前知道命名组件是否可用。

也就是说，我尝试编写一个单元测试来实例化一个使用未知组件的组件。我在控制台中收到相同的“未知自定义元素...”警告，但由于未抛出任何内容，因此测试不会失败!真可惜...我看了一眼source code for that warning不幸的是，在任何地方都没有注册任何东西来记录丢失的组件。

另一种选择是执行安装组件的单元测试，然后通过 vm.$refs 或 DOM 元素检查所需组件是否实际呈现。不过，这似乎很麻烦，而且需要大量维护。

但是，我想我找到了一个很好的钩子(Hook)来获取警告!查看Vue.config.warnHandler .您可以在安装组件的测试中添加一个 warnHandler 并检查是否发出有关缺少元素的警告。

关于javascript - 我可以在未注册的组件上构建 Vue.js 失败吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57615609/

javascriptVuecodecompilercomponentvue.jsvuejs2

有关javascript - 我可以在未注册的组件上构建 Vue.js 失败吗？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  3. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  4. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  5. ruby - 即使失败也继续进行多主机测试 - 2

    我已经构建了一些serverspec代码来在多个主机上运行一组测试。问题是当任何测试失败时，测试会在当前主机停止。即使测试失败，我也希望它继续在所有主机上运行。Rakefile:namespace:specdotask:all=>hosts.map{|h|'spec:'+h.split('.')[0]}hosts.eachdo|host|begindesc"Runserverspecto#{host}"RSpec::Core::RakeTask.new(host)do|t|ENV['TARGET_HOST']=hostt.pattern="spec/cfengine3/*_spec.r

  6. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法

  7. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  8. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  9. ruby - 一个 YAML 对象可以引用另一个吗？ - 2

    我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的ruby​​yaml解析器。这可能吗？ 最佳答案 一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir

  10. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

随机推荐