导入本地npm软件包时出错

Question

我们有几个网站，每个网站都在自己的项目中，并且我们希望将它们全部迁移到使用Vue.js。 每个网站都有其自己的目录，其中包含.vue文件，然后使用Webpack将其捆绑在一起。 我们有一个Webpack配置，可以转换.vue文件，捆绑，棉绒并通过babel将其通过管道传输，并且运行良好。

但是，既然我们已经进行了数周的工作，我们已经注意到有一些组件和核心javascript文件非常相似，并且理想情况下，我们希望将它们引入vue组件和功能的共享库中。

我们提取了几个.vue进入网站旁的文件夹，并把它们放在一起，与自己的一个基本的NPM模块package.json ，并使用NPM文件包括包括，所以在package.json它只是看起来像： "vue-shared": "file:../CommonJavascript/Vue" 。 现在，当我们尝试使用Webpack生成捆绑包时，我们得到了以下错误：

../CommonJavascript/Vue/index.js中的错误模块构建失败（来自./node_modules/eslint-loader/index.js）：错误：无法加载插件反应：找不到模块'eslint-plugin-react'

我不确定此错误来自何处，因为我们没有在任何地方使用react，并且在将文件移出之前看起来很高兴可以很好地构建。 目前，共享模块中唯一的依赖项是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指定为未知插件“ transform-runtime”相对于“ C：\\ Projects \\ Tmo \\ Code \\ CommonJavascript \\ Vue”进行解析

现在，一个让多一点意义上，我们确实使用主体工程通天运行时变换，但它不是由任何在共享项目中必需的，即使是 ，肯定是事实，它被包含在主体工程表示它仍应构建。

在某种程度上，似乎我只是不了解npm解决依赖关系的方式。 它似乎正在尝试通过查看共享文件项目来解决一些依赖性，但我不知道为什么。 我也不知道这种对eslint-plugin-react的奇怪依赖来自何处。

所以我想这是一个多部分的问题。 npm尝试解决依赖关系的方式是什么？ 通过将.vue文件移动到一个单独的项目中，将其包装为模块并在主项目中需要它，我是否做对了？ 如果没有，拥有这样的共享依赖关系的最佳方法是什么？

Answer 1

这是由两个独立的问题混合引起的：

• 导入语句未正确引用文件，正确的语法为： import button from './Button.vue' （请注意对文件路径的更改）
• 当您通过路径将本地软件包添加到npm时，它会创建一个指向文件夹的符号链接，而不是复制文件（这是npm v5 +以来的行为）。 然后，这将更改webpack尝试解析依赖项的方式，因为它随后从共享文件的位置查找以尝试解决包含eslint和babel之类的依赖项。
• eslint-plugin-react依赖关系是因为我在Visual Studio代码中安装了eslint插件，该插件似乎创建了一个.eslintrc文件，该文件引用了我的用户文件夹（c：\\ users \\ <username>）中的react插件。 如果找不到配置文件，则Eslint将其用作默认值（由于上述路径问题，它无法在共享文件上方查找，所以无法找到该配置文件）

我们已经决定以后将为这些文件使用git子模块