导入本地 npm 包时出错 [英] Error importing local npm package

问题描述

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

We have several websites, each in its own project, and we are looking to migrate them all to using Vue.js. Each website has its own directory with .vue files that are then bundled using Webpack. We have a Webpack config in place that converts the .vue files, bundles, lints and pipes it all through babel and it works fine.

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

However, now that we have been moving things over for several weeks we have noticed that there are several components and core javascript files that are very similar and ideally we want to pull these out into a shared library of vue components and functions.

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

We have extracted several .vue into a folder alongside the websites, and put them together as a basic npm module with its own package.json, and include them using an npm file include, so in the package.json it just looks like: "vue-shared": "file:../CommonJavascript/Vue". Now when we try to use Webpack to build the bundle, we get the error:

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

ERROR in ../CommonJavascript/Vue/index.js Module build failed (from ./node_modules/eslint-loader/index.js): Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'

我不确定这个错误是从哪里来的，因为我们没有在任何地方使用 react，而且在我们移出文件之前构建得很好似乎很高兴.目前共享模块中唯一的依赖是moment，它只包含4个.vue，以及一个将它们捆绑起来的基本包装器:

I'm not sure where this error is coming from, because we aren't using react anywhere, and it seemed happy enough to build fine before we moved the files out. At the moment the only dependency in the shared module is moment, and it only contains 4 .vue, and a basic wrapper to bundle them up:

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,
}

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

But, I was curious so I decided to add the package (even though we don't need it) to see if it would fix the issue, but I then get a new error:

../CommonJavascript/Vue/index.js 中的错误模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):ReferenceError:在base"中指定的未知插件transform-runtime"在 0 处，尝试相对于C:\Projects\Tmo\Code\CommonJavascript\Vue"进行解析

ERROR in ../CommonJavascript/Vue/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "C:\Projects\Tmo\Code\CommonJavascript\Vue"

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

Now, that one makes a little more sense, we do use the babel runtime transform on the main project, but it isn't required by anything in the shared project and even if it was, surely the fact it is included in the main project means it should still build.

部分原因，似乎我只是不理解 npm 解决依赖关系的方式.现在似乎试图通过查看共享文件项目来解决一些依赖关系，但我不知道为什么.我也不知道这种对 eslint-plugin-react 的奇怪依赖从何而来.

Partly, it seems perhaps I'm just not understanding the way npm resolves dependencies. It seems to be trying to now resolve some dependencies by looking in the shared files project and I dont know why. Also I have no idea where this strange dependency on eslint-plugin-react has come from.

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

So I guess this is a multi-part question. What is up with the way npm is trying to resolve the dependencies? Am I doing things right by moving the .vue files into a separate project, wrapping it up as a module and requiring it in the main project? and if not, what is the best way to have shared dependencies like this?

推荐答案

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

This was caused by a mixture of two separate issues:

• 导入语句没有正确引用文件，正确的语法是:import button from './Button.vue'(注意文件路径的变化)
• 当您通过路径将本地包添加到 npm 时，它会创建指向文件夹的符号链接，而不是复制文件(这是自 npm v5+ 以来的行为).这随后改变了 webpack 尝试解析依赖项的方式，因为它随后从共享文件的位置查找以尝试解析依赖项，包括像 eslint 和 babel 之类的东西.
• eslint-plugin-react 依赖是因为在 Visual Studio 代码中我安装了 eslint 插件，它似乎创建了一个 .eslintrc 文件，该文件引用了我的用户文件夹中的 react 插件(c:\users\<用户名>).如果 Eslint 找不到配置文件，那么它会使用它作为默认值(因为上述路径问题，它无法找到共享文件的上方)

• The import statements didn't reference the file properly, the correct syntax is: import button from './Button.vue' (note the change to file path)
• When you add a local package to npm via a path, it creates a symlink to the folder rather than copying the files over (this has been the behaviour since npm v5+). This then changes the way webpack tries to resolve dependencies since it then looks up from the location of the shared files to try and resolve dependencies including thing like eslint and babel.
• The eslint-plugin-react dependency was because in visual studio code I had installed the eslint plugin, which it seems had created a .eslintrc file which reference the react plugin in my user folder (c:\users\<username>). Eslint will then use this as the default if it can't find a config file (which it couldn't because it was looking above the shared files because of the pathing issues described above)

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

We have decided we will be using a git submodule for these files going forward

这篇关于导入本地 npm 包时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！