javascript - 甚至在package.json和node_modules中都没有找到依赖项

我使用vue.js和vue-cli创建一个项目。
vue init webpack my-project
我正在尝试使用http://photo-sphere-viewer.js.org/创建一个组件，因此我使用了
npm install --save photo-sphere-viewer
然后将其下载到node_modules中，并显示在package.json中的依赖项下，如下所示:
"photo-sphere-viewer": "^3.2.3",
我尝试使用以下命令在脚本标签中导入VR-Pano.vue组件
import PhotoSphereViewer from 'photo-sphere-viewer';
和
var PhotoSphereViewer = require('photo-sphere-viewer');
但是当我运行npm运行dev

This dependency was not found:

photo-sphere-viewer in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/VR-Pano.vue

我试过了:npm cache clean && npm update -g
对webpack进行了一些研究，但由于我对webpack不太熟悉，所以并不真正知道发生了什么。我原以为这是一个简单的过程，但是我怀疑Webpack无法正确安装某些东西，或者我做了一些非常愚蠢的事情。

这是我的webpack.base.conf.js

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  // target: 'electron-main',
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
         include: [resolve('src'), resolve('test')],
         options: {
           formatter: require('eslint-friendly-formatter')
         }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('[path][name].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

最佳答案

我利用这次调试机会来了解有关npm和webpack的更多信息。

看来photo-sphere-viewer的创建者没有指定其“主”文件所在的位置，即您在import或require时返回的文件。我认为默认情况下，npm在项目根目录下查找index.js。但是很多时候，程序包创建者将其分发文件放在dist或lib目录下。 Photo Sphere全景相片的人这样做了，但并未在package.json中指定位置。解决方法是添加

"main":"./dist/photo-sphere-viewer.min.js"

到photo-sphere-viewer的package.json文件。如果您没有在结尾处添加逗号，请确保添加逗号。我也建议在他们的Github上提交一个问题，这似乎是一个错误。

另外，您也可以

import PhotoSphereViewer from 'photo-sphere-viewer/dist/photo-sphere-viewer.min.js';

关于javascript - 甚至在package.json和node_modules中都没有找到依赖项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47540846/