依赖关系甚至在 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中被下载并在dependencies下的package.json中显示为

"photo-sphere-viewer": "^3.2.3",

我尝试使用

在脚本标签内导入组件 VR-Pano.vue

import PhotoSphereViewer from 'photo-sphere-viewer';

和

var PhotoSphereViewer = require('photo-sphere-viewer');

但是当我运行 npm run 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 的更多信息。

看起来 photo-sphere-viewer 的创建者没有指定他们的“主”文件在哪里，当你 import 或 require 时返回的文件。我认为默认情况下 npm 在项目根目录中查找index.js。但很多时候，包创建者将他们的分发文件放在dist 或lib 目录下。照片领域的人这样做了，但没有在他们的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';