导入 vue.js 插件未定义答案

【问题标题】：import vue.js plugin is undefined导入 vue.js 插件未定义
【发布时间】：2018-03-14 15:59:18
【问题描述】：

我有一个项目是 vue.js 插件，另一个是 vue.js SPA。

但我尝试在 SPA 项目中导入我的 vue.js 插件始终未定义。

vue.js 插件导出如下：

export function install(Vue,config){
  //do something
}

它的 webpack 输出设置为umd

我像这样导入我的插件：

import MyPlugin from 'my-plugin'
console.log(MyPlugin)//undefined
Vue.use(MyPlugin)//throw error 'Cannot read property 'install' of undefined'

所以我检查了已编译的 bundle.js 中的代码，然后我看到了这个

console.log(_myplugin2.default);

但是我怎样才能强制使用_myplugin2 作为插件呢？

【问题讨论】：

【解决方案1】：

Webpack 假设您已经导出了 default 属性。

你可以这样做：

export default {
  install: function(Vue,config) {
    //do something
  }
}

如果您不想使用default，则需要使用命名变量将其导出：

export const MyPlugin = {
  install: function(Vue,config) {
    //do something
  }
}

然后在导入时专门引用那个变量引用：

import { MyPlugin } from 'my-plugin'

【讨论】：

我试过了，但是当我在 html 脚本标签中包含脚本时，我需要使用额外的 default
我想让模块可以从 node_modules 导入并包含在脚本标签中
不确定你的意思，我已经在我的回答中添加了一个工作示例
webpack config，我的意思是当我使用你的代码时，在浏览器中包含build.js(module) 将输出模块到window.myplugin.default 而不是window.myplugin
我添加了一个不使用 default 的示例。但是，为什么您需要在构建应用程序后访问您的插件？

【解决方案2】：

我终于用另一个脚本作为 webpack 入口了。

entry.js：

module.exports=require('./main')

main.js：

function install(Vue,config){
  //something
}
export default {install}

然后可以在window.myplugin和import myplugin from 'myplugin'访问

【讨论】：