代码之家 › 专栏 › 技术社区 › Anduril

导入本地NPM包时出错

vue.js webpack npm javascript

Anduril · 技术社区 · 6 年前

我们有几个网站,每个都在自己的项目中,我们希望使用vue.js将它们全部迁移到。每个网站都有自己的目录 .vue 然后使用Webpack捆绑的文件。我们有一个Webpack配置,可以将.vue文件、捆绑包、lints和管道全部转换到babel中,并且工作正常。

但是,由于我们已经移动了几个星期,我们注意到有几个组件和核心JavaScript文件非常相似,理想情况下,我们希望将它们拉到一个由Vue组件和函数组成的共享库中。

我们提取了几个 VUE 放在网站旁边的一个文件夹中,并将它们作为基本的NPM模块与自己的模块放在一起。 package.json ,并使用npm文件include包含它们,因此 包装袋 看起来就像: "vue-shared": "file:../CommonJavascript/Vue" . 现在,当我们尝试使用Webpack构建包时,我们得到错误:

../commonjavascript/vue/index.js中出错模块生成失败(来自./node_modules/eslint loader/index.js): 错误:加载插件react失败:找不到模块“eslint plugin react”

我不确定这个错误是从哪里来的,因为我们没有在任何地方使用react,而且在我们移出文件之前,它看起来非常高兴地构建了fine。目前,共享模块中唯一的依赖项是moment,它只包含4个 VUE 和一个基本的包装器来打包它们:

import button from 'Button.vue'
import loading from 'Loading.vue'
import modal from 'Modal.vue'
import progressBar from 'ProgressBar.vue'

export default {
  button,
  loading,
  modal,
  progressBar,
}

但是,我很好奇,所以我决定添加这个包(即使我们不需要它),看看它是否可以解决问题,但是我得到了一个新的错误:

../commonjavascript/vue/index.js中出错模块生成失败(来自./node_modules/babel loader/lib/index.js): referenceerror:在0处的“base”中指定了未知的插件“transform runtime”,试图相对于“c:\projects\tmo\code\commonjavascript\vue”进行解析。

现在,这一点更加合理了,我们确实在主项目上使用了babel运行时转换,但是共享项目中的任何东西都不需要它,即使它是当然,它包含在主要项目中的事实意味着它仍然应该建造。

在一定程度上,我似乎不理解NPM解决依赖关系的方式。它现在似乎试图通过查看共享文件项目来解决一些依赖关系,我不知道为什么。我也不知道这种对eslint插件反应的奇怪依赖来自何处。

所以我想这是一个多部分的问题。NPM试图解决依赖关系的方式是什么?我通过移动 VUE 文件到一个单独的项目,包装成一个模块,并在主项目中要求它?如果没有,那么什么是拥有这样的共享依赖关系的最佳方法呢?

1 回复 | 直到 6 年前

Anduril 6 年前

这是由两个独立问题的混合造成的:

import语句没有正确引用文件,正确的语法是: import button from './Button.vue' (注意对文件路径的更改)
当您通过路径将本地包添加到NPM时,它将创建指向文件夹的符号链接,而不是复制文件(这是自NPM v5+以来的行为)。这会改变Webpack尝试解析依赖项的方式,因为它会从共享文件的位置查找并尝试解析依赖项,包括eslint和babel。
eslint插件react依赖项是因为在Visual Studio代码中,我安装了eslint插件,它似乎创建了一个 .eslintrc 引用“我的用户”文件夹中的react插件的文件(C:\users\<username>)。如果eslint找不到配置文件(由于上面描述的路径问题,它在共享文件上方查找,因此找不到配置文件),那么它将使用该文件作为默认文件。

我们已经决定将使用git子模块来处理这些文件。