javascript - 当模块是`npm link`时，Vue 3组件初始化不正确

问题描述

以下是我的库的入口点，它生成一个带有动态标签的组件：

// muvement.js

import { defineComponent, ref, onMounted, h } from 'vue';

const createMuvement = (tag) => {
    return defineComponent({
        name: `m-${tag}`,
        setup(props, context) {
            const root = ref(null);
            onMounted(() => {
                console.log(root.value);
            });
            return () => h(tag, { ...context.attrs, ref: root }, context.slots);
        }
    });
};

const muvement = (...tags) => {
    const components = {};
    tags.map((tag) => (components[`m-${tag}`] = createMuvement(tag)));
    return components;
};

export { muvement };

预计会这样消费：

// Home.vue

<template>
  <div>
    <m-div>div</m-div>
    <m-button>button</m-button>
  </div>
</template>

<script>
import { muvement } from "muvement";

export default {
  name: "Home",
  components: {
    ...muvement("div", "button")
  }
};
</script>

当库代码包含在 Vue 应用程序文件夹中时，这可以按预期工作（假设我们现在从导入"@/components/muvement.js"而不是"movement"）。
那是：

-muvement-test-project (scaffolded with vue-cli)
    - src
        - views
            - Home.vue
        - components
            - muvement.js

我还发布了一个 alpha 版本，"muvement"在直接从 npm 注册表（即，npm install muvement而不是npm link muvement）安装后导入时可以正常工作。

问题

在开发过程中，我想要一个应用程序来测试与库目录分开的库。

我曾经npm link将库链接到测试应用程序（就像我过去对许多其他项目所做的那样）。

从 /path/to/library

$ npm link

从 /path/to/test/app

$ npm link muvement

到现在为止还挺好。node_modules该模块在测试应用程序的文件夹中作为符号链接提供。所以我import { muvement } from "muvement"，跑npm run serve，然后... BOOM。
一切都会爆炸（请参阅下面的错误）。还可能值得注意的是，尝试从完整路径 (ie C:/dev/npm/muvment/dist/es/index.js) 导入会导致相同的问题npm link，所以我认为它与符号链接没有任何直接关系。

这是控制台中显示的内容：

几乎一整天，我一直在尝试解决这个问题。我已经看到了几个看似相似的问题，这些问题通过设置 Webpackresolve.symlinks来解决，false但这对我的问题没有影响。我已经阅读了所有文档，甚至 Vue 的源代码（对于那些好奇的人来说，这是冒犯的行）。

由于警告表明该错误通常归因于async setup我认为也许 webpack 正在做一些奇怪的事情，这会使我的代码异步。情况似乎并非如此，因为工作尝试和失败尝试的调用堆栈是相同的。

不同的是范围。

以下是正在运行的示例的范围：

这是失败的一个：

（请注意，target参数null在调用期间injectHook，这显然是提示 Vue 显示警告的原因）。

我的问题是，为什么导入模块的位置在执行所述模块时会产生如此大的差异？

库代码和构建设置可在此处获得：
https ://github.com/justintaddei/muvement

测试应用程序可在此处获得：
https ://github.com/justintaddei/muvement/tree/example

如果我遗漏了一些重要的内容，请在评论中告诉我。这是漫长的一天，所以我确定我可能错过了一些东西。

谢谢你。

标签： javascriptvue.jswebpackvuejs3

问题是您的应用程序在后台使用了两个不同的 vue 依赖项 - vue 需要使用相同的依赖项来跟踪反应性、生命周期等。

当您链接库时，npm/yarn 将使用该链接文件夹node_modules，但您app正在使用它的依赖关系node_modules。

当您的app导入vue时它会去app/node_modules/vue，但是当您从链接的依赖项导入时，它将去linked_dep/node_modules/vue.

app
  node_modules
    vue
linked library
  node_modules    
    vue

调试此问题的一种简单方法是使用 a 更改两个 vue 依赖文件，console.log并检查控制台是否记录了这两个文件。

javascript - 当模块是`npm link`时，Vue 3组件初始化不正确

问题描述

问题

解决方案

推荐阅读