依存関係はpackage.jsonとnode_modulesでも定義されていません

Question

私はvue.jsとvue-cliを使ってプロジェクトを作成します。

vue init webpack my-project

私はこのように私は

npm install --save photo-sphere-viewer

を使用して、それをインストールすると、それがnode_modulesにダウンロードして依存関係の下でpackage.jsonに表示された、http://photo-sphere-viewer.js.org/を使用してコンポーネントを作成しようとしています as

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

私は NPMの実行DEVを実行したときに

そして私は

import PhotoSphereViewer from 'photo-sphere-viewer';

そして

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

を使用してスクリプトタグ内、部品、VR-Pano.vueにインポートしようとしたが、

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ディレクトリの下に置きます。 Photo Sphereの人々はこれを行いましたが、その場所を指定していませんpackage.json。解決策は、光球ビューアpackage.jsonファイルに

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

を追加することです。最後にカンマを置かない場合は、末尾にカンマを追加してください。また、私はまた...これはバグのように思える、自分のGithub上の問題を提起

をお勧めします、あなたはまた、

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