按需引入文件時報錯，提示Cannot read property 'name' of undefined

開發(fā)vue插件報錯

最近有個需求，想要封裝一套自己的組件內(nèi)部使用，通用組件通過對iview二次封裝，專業(yè)的自己開發(fā)，前期我搭建環(huán)境之后，封裝了一個iview的input組件，本地調(diào)用沒問題。后面進(jìn)過npm run build以及npm pack只有本地生成了一個tgz包，然后我再另外一個項目中引入。結(jié)果報錯了，詳情見下。這里假設(shè)自己封裝的項目為A，引入A的項目為B。

A中封裝的組件

<template>
  <Input class="fss-input" :placeholder='placeHolder'></Input>
</template>

<style lang="less" scoped>
.fss-input {
  width: 200px;
}
</style>

<script>
import { Input } from 'iview'
export default {
  name: 'fss-input',
  props: {
    placeHolder: {
      type: String,
      default: '敲幾個字唄...'
    }
  },
  components: {
    Input
  }
}
</script>

下面是A中包裝上面的組件作為vue插件使用的代碼

import FssInput from './components/input'

const components = [
  FssInput
]

//這邊我是參考element和iview的方式寫的
const install = function(Vue, opts = {}) {
  components.map(component => {
    console.log('name', component.name)
    Vue.component(component.name, component)
  })
}

// auto install
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

const API = {
  install,
  ...components
}

module.exports.default = module.exports = API

B通過npm install引入了A，同時為了在B中按需引入A的組件，也做了如下配置

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": ["import", {
      "libraryName": "FssFrontComponent", //換成"fss-front-component"情況一樣
      "libraryDirectory": "src/components"
    }]
}

下面是B中引入A的代碼

<template>
  <div class="hello">
    <fss-input></fss-input>
  </div>
</template>

<script>
import { FssInput } from 'fss-front-component'
export default {
  name: 'HelloWorld',
  components: {
    [FssInput.name]: FssInput
  },
  data () {
    return {
      placeholder: '終于好了。。。'
    }
  }
}
</script>

報錯如下圖：

我把引入方法改成如下這樣后，報錯就不同了

import { FssInput } from 'fss-front-component'
export default {
  name: 'HelloWorld',
  components: {
    FssInput
  },
  data () {
    return {
      placeholder: '終于好了。。。'
    }
  }
}

報錯：

晚上很多教程都是自己寫的單個組件，我們這邊是需要一個組件庫的，只不過暫時只有一個input而已，大家如果有好的方法解決請不吝告知，多謝~