首页 文章

导入本地npm包时出错

提问于
浏览 次
0

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

但是，既然我们已经移动了几个星期，我们已经注意到有几个组件和核心javascript文件非常相似，理想情况下我们希望将它们拉到vue组件和函数的共享库中 .

我们已将几个 .vue 提取到网站旁边的文件夹中，并将它们作为基本的npm模块放在一起，并使用自己的 package.json ，并使用npm文件包含它们，所以在 package.json 中它只是： "vue-shared": "file:../CommonJavascript/Vue" . 现在，当我们尝试使用Webpack构建bundle时，我们得到错误：

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

我在任何地方使用反应，看起来很高兴在我们移出文件之前 Build 好 . 目前，共享模块中唯一的依赖项是时刻，它只包含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：未知插件“transform-runtime”在“base”中指定为0，试图解决相对于“C：\ Projects \ Tmo \ Code \ CommonJavascript \ Vue”

现在，那个更有意义，我们确实在主项目上使用了babel运行时变换，但共享项目中的任何东西都不需要它，即使它是，它肯定是它包含在主项目中的事实意味着它仍然应该 Build .

部分地，似乎我可能只是不理解npm解决依赖关系的方式 . 它似乎试图通过查看共享文件项目来解决一些依赖项，我不知道为什么 . 此外，我不知道这种对eslint-plugin-react的奇怪依赖来自哪里 .

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

javascript npm webpack vue.js

1 回答

  • 0

    这是由两个不同问题混合引起的：

    • import语句没有正确引用文件，正确的语法是： import button from './Button.vue' （注意文件路径的更改）

    • 当您通过路径向npm添加本地包时，它会创建一个符号链接到该文件夹而不是复制文件（这是自npm v5以来的行为） . 然后，这会改变webpack尝试解析依赖关系的方式，因为它然后从共享文件的位置查找以尝试解决依赖关系，包括eslint和babel之类的东西 .

    • eslint-plugin-react依赖是因为在visual studio代码中我安装了eslint插件，它似乎创建了一个 .eslintrc 文件，该文件引用了我的用户文件夹中的react插件（c：\ users \ <username>） . 然后Eslint将使用此作为默认值，如果它可以't find a config file (which it couldn' t因为它在共享文件之上，因为上面描述的路径问题）

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

    回复于

相关问题