Javascript 在package.json和node_模块中甚至没有定义依赖项

我使用vue.js和vue cli创建项目

vue init网页包我的项目

我试图使用创建一个组件，因此我使用

npm安装--保存photo sphere viewer

然后它被下载到node_模块中，并显示在package.json的dependencies下，如下所示

“photo sphere viewer”：“^3.2.3”，

我尝试使用

从“photo sphere viewer”导入PhotoSphereViewer

及

var PhotoSphereViewer=require（'photo-sphere-viewer'）

但是当我运行npm运行dev时

我试过：
npm缓存清理和npm更新-g

对webpack做了一些研究，但不知道发生了什么，因为我对webpack不太熟悉。我原以为这是一个简单的过程，但我怀疑我的网页设置不正确，或者我做了一些非常愚蠢的事情

这是我的webpack.base.conf.js


var path=require（'path'））
var utils=require（“./utils”）
var config=require（“../config”）
var vueLoaderConfig=require（'./vue loader.conf'）
函数解析（dir）{
返回路径.连接（uu dirname，…，dir）
}
module.exports={
条目：{
应用程序：'./src/main.js'
},
//目标：'电子主'，
输出：{
路径：config.build.assetsRoot，
文件名：'[name].js'，
publicPath:process.env.NODE_env==='production'
？config.build.AssetPublicPath
：config.dev.assetsPublicPath
},
决心：{
扩展：['.js'、'.vue'、'.json']，
别名：{
“vue$”：“vue/dist/vue.esm.js”，
“@”：解析（'src'）
}
},
模块：{
规则：[
{
测试：/\（js | vue）$/，
加载程序：“eslint加载程序”，
强制执行：“预”，
包括：[解析（'src'）、解析（'test'）]，
选项：{
格式化程序：需要（'eslint-friendly-formatter'）
}
},
{
测试：/\.vue$/,，
加载程序：“vue加载程序”，
选项：vueLoaderConfig
},
{
测试：/\.js$/,，
加载器：“巴别塔加载器”，
包括：[解析（'src'），解析（'test'）]
},
{
测试：/\（png | jpe？g | gif | svg）（\？*）$/，
加载器：“url加载器”，
选项：{
限额：10000，
名称：utils.assetsPath（'[path][name].[ext]'）
}
},
{
测试：/\（woff2？| eot | ttf | otf）（\？*）$/，
加载器：“url加载器”，
选项：{
限额：10000，
名称：utils.assetsPath（'font/[name].[hash:7].[ext]'）
}
}
]
}
}
我借此调试机会了解了有关npm和webpack的更多信息

photo sphere viewer的创建者似乎没有指定其“主”文件的位置，即当您导入
或
需要时返回的文件。我认为默认情况下，npm在项目根目录中查找
index.js
。但很多时候，包创建者将其分发文件放在
dist
或
lib
目录下。PhotoSphere的人这样做了，但没有在他们的
包.json
中指定位置。解决办法是增加

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

到photo sphere viewer
package.json
文件。如果你没有把逗号放在末尾，一定要在后面加一个逗号。此外，我还建议在他们的Github上提交一个问题，这似乎是一个bug

或者，您也可以这样做

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

非常感谢您的调查和解释。我学到了一些有价值的东西。
import PhotoSphereViewer from 'photo-sphere-viewer/dist/photo-sphere-viewer.min.js';