• 4.6k

用babel-plugin-component组件按需引入两套UI会存在覆盖报错,大家是否有遇到过?

babel-plugin-component组件按需引入两套UI(mint-uielement-ui),安照官方的写法,我在.babelrc文件中写法如下:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      },
      "element-ui"
    ],
    [
      "component",
      {
        "libraryName": "mint-ui",
        "style": true
      },
      "mint-ui"
    ]
  ]
}

发现编译上一个(element-ui)会覆盖(mint-ui)作为按需引入对象,而不是分别进行,报错如下:

ERROR  Failed to compile with 12 errors                                                                                                                         15:12:00
These dependencies were not found:

* element-ui/lib/infinite-scroll in ./src/assets/js/mintConfig.js
* element-ui/lib/navbar in ./src/assets/js/mintConfig.js
* element-ui/lib/swipe in ./src/assets/js/mintConfig.js
* element-ui/lib/swipe-item in ./src/assets/js/mintConfig.js
* element-ui/lib/tab-item in ./src/assets/js/mintConfig.js
* element-ui/lib/theme-chalk/infinite-scroll.css in ./src/assets/js/mintConfig.js
* element-ui/lib/theme-chalk/navbar.css in ./src/assets/js/mintConfig.js
* element-ui/lib/theme-chalk/swipe-item.css in ./src/assets/js/mintConfig.js
* element-ui/lib/theme-chalk/swipe.css in ./src/assets/js/mintConfig.js
* element-ui/lib/theme-chalk/tab-item.css in ./src/assets/js/mintConfig.js
* element-ui/lib/theme-chalk/toast.css in ./src/assets/js/mintConfig.js
* element-ui/lib/toast in ./src/assets/js/mintConfig.js

To install them, you can run: npm install --save element-ui/lib/infinite-scroll element-ui/lib/navbar element-ui/lib/swipe element-ui/lib/swipe-item element-ui/lib/tab-item element-ui/lib/theme-chalk/infinite-scroll.css element-ui/lib/theme-chalk/navbar.css element-ui/lib/theme-chalk/swipe-item.css element-ui/lib/theme-chalk/swipe.css element-ui/lib/theme-chalk/tab-item.css element-ui/lib/theme-chalk/toast.css element-ui/lib/toast

按需引入mint-uijs文件

// 按需引入mint-ui组件
import {
  Toast,
  Navbar,
  Swipe,
  SwipeItem,
  Header,
  Button,
  Spinner,
  InfiniteScroll,
  TabItem
} from 'mint-ui'

export default {
  install (V) {
    V.prototype.$toast = Toast
    V.component(Navbar.name, Navbar)
    V.component(Swipe.name, Swipe)
    V.component(SwipeItem.name, SwipeItem)
    V.component(Header.name, Header)
    V.component(Button.name, Button)
    V.component(Spinner.name, Spinner)
    V.component(TabItem.name, TabItem)
    V.use(InfiniteScroll)
  }
}

按需引入element-uijs文件

import '~/style/pc/elementVariables.scss'

import {
  Row,
  Button,
  Icon
} from 'element-ui'

export default {
  install (V) {
    V.use(Icon)
    V.use(Row)
    V.use(Button)
  }
}

请问有遇到相同问题的童鞋吗?有什么解决的办法,欢迎讨论哈。PS:因为同时一套代码兼容移动端和PC端,所以同时引入了mint-uielement-ui

阅读 4.1k
评论
    2 个回答
    • 17
    [
      "component",
      [
        { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" },
        { "libraryName": "mint-ui", "style": true }
      ]
    ]
      • 2
      • 新人请关照

      babel 6.x

      "component",
        [
          { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" },
          { "libraryName": "mint-ui", "style": true }
        ]

      =====================
      babel 7.x

      [
            "component",
            {
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
            },
            "element-ui"
          ],
          [
            "component",
            {
              "libraryName": "mint-ui",
              "style": true
            },
            "mint-ui"
          ]
        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章