以下是我的库的入口点,它会生成一个带有动态标签的组件:
目前为止还不错。该模块在测试应用程序的
一切都爆炸了(请参见下面的错误)。值得注意的是,尝试从完整路径导入(即
以下是控制台中显示的内容:
几乎整天我一直在尝试解决这个问题。我看到了几个看起来类似的问题,通过将Webpack的
由于警告表明错误通常归因于
不同的是范围不同。
以下是示例有效的范围:
以下是失败的一种:
(请注意,在调用
我的问题是,为什么在执行该模块期间导入模块的位置会产生如此大的差异?
该库的代码和构建设置在此处可用:
https://github.com/justintaddei/muvement
// 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 版本,当您直接从 npm registry 安装它时(即使用 npm install muvement
而不是 npm link muvement
),可以在导入 "muvement"
时正常工作。
问题
在开发过程中,我希望有一个独立于库目录的应用程序来测试该库。
我使用了 npm link
将库链接到测试应用程序中(就像我过去做过的许多其他项目一样)。
从 /path/to/library
$ npm link
来自 /path/to/test/app
$ npm link muvement
目前为止还不错。该模块在测试应用程序的
node_modules
文件夹中可用作符号链接。我导入{muvement} from "muvement",运行npm run serve
,然后...砰。一切都爆炸了(请参见下面的错误)。值得注意的是,尝试从完整路径导入(即
C:/dev/npm/muvment/dist/es/index.js
)会导致与npm link
相同的问题,因此我认为它与符号链接无关。以下是控制台中显示的内容:
![warning in Chrome devtools](https://istack.dev59.com/Pbu9N.webp)
resolve.symlinks
设置为false
来解决,但这对我的问题没有影响。我已经仔细阅读了文档,甚至阅读了Vue的源代码(这里是有问题的代码行)。由于警告表明错误通常归因于
async setup
,我认为Webpack可能正在执行某些使我的代码变成异步的奇怪操作。但事实并非如此,因为工作尝试和失败尝试的调用堆栈完全相同。不同的是范围不同。
以下是示例有效的范围:
![enter image description here](https://istack.dev59.com/kfwYC.webp)
![enter image description here](https://istack.dev59.com/pCTKI.webp)
injectHook
时target
参数为null
,这显然促使Vue显示警告)。我的问题是,为什么在执行该模块期间导入模块的位置会产生如此大的差异?
该库的代码和构建设置在此处可用:
https://github.com/justintaddei/muvement
测试应用程序在此处可用:
https://github.com/justintaddei/muvement/tree/example
如果我漏掉了重要的东西,请在评论中告诉我。由于今天很长,我肯定可能错过了某些事情。
谢谢。
inject
这里。 - Craig Harshbarger