在package.json和node_modules中连定义的依赖项都找不到

Question

我使用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]')
        }
      }
    ]
  }
}

​

Answer 1

我利用这次调试的机会来了解更多关于npm和webpack的知识。

看起来，照片球面查看器的创建者没有指定他们的“主”文件在哪里，即当您使用import或require时返回的文件。我认为在默认情况下，npm会在项目根上查找index.js。但是很多时候，包创建者将他们的发行文件放在dist或lib目录下。照片圈的人这样做，但没有指定在他们的package.json中的位置.解决方案是添加

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

到package.json文件中.如果没有将逗号放在末尾，请确保添加一个后缀逗号。另外，我建议在他们的Github上提出一个问题，这似乎是个错误..

或者，你也可以

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