按需加载 似乎有问题

[NewFuture]

ElementUI version

1.0.9

Steps to reproduce

import { Message } from 'element-ui';

Message('hello');

What is Expected?

提示找不到模块

Module not found: Error: Can't resolve 'antd/lib/message' in ***

[reverland]

antd ？？

[jikkai]

检查下使用的babel按需加载插件是否为babel-plugin-component

[NewFuture]

@jikkai 是的，还是最新的，刚试minit-ui 也没问题

不确定是我的个案，还是文档或者版本有问题

[jikkai]

再怎么样也不会报ant design的错，请仔细检查配置和代码里有没有antd的东西…

[NewFuture]

看了一下element的lib和src,目录， 这个地方的 https://github.com/ElemeFE/element/blob/master/package.json#L5 入口是这个已经打包好的lib/element-ui.common.js

暂时解决方案

目前改成这样就好了( 相当于原始入口lib/index.js)

import { Message } from 'element-ui/lib/';

[NewFuture]

没有装antd相关 @jikkai @reverland

❔ 好奇怪

[stackia]

楼主把 .babelrc 配置发来看看

@reverland @jikkai babel-plugin-component 是 fork 自 ant-design/babel-plugin-import 的，看了下源码，如果找不到模块，那默认 libraryName 就是 antd，所以报错就会显示 antd 了

@QingWei-Li 我在使用 mint-ui + babel-plugin-component 时遇到一个问题，使用 import { Picker } from 'mint-ui' 没有问题，但是使用 import { Picker as MyPicker } from 'mint-ui' 就会报错：

Module not found: Error: Cannot resolve module 'antd/lib/my-picker'

[NewFuture]

babel的配置

{
    "presets": [
        [
            "es2015", { "modules": false }
        ]
    ],
    "plugins": [
        [
            "component", [{
                "libraryName": "mint-ui",
                "style": true
            }]
        ],
        [
            "component", [{
                "libraryName": "element-ui",
                "styleLibraryName": "theme-default"
            }]
        ]
    ],
    "env": {
        "production": {
            "plugins": [
                "transform-runtime", [
                    "component", [{
                        "libraryName": "mint-ui",
                        "style": true
                    }]
                ],
                [
                    "component", [{
                        "libraryName": "element-ui",
                        "styleLibraryName": "theme-default"
                    }]
                ]
            ]
        }
    }
}

关键部分就是这个 (两个子项目分别用了mint和element)

{
    "presets": [
        [
            "es2015", { "modules": false }
        ]
    ],
    "plugins": [
        [
            "component", [{
                "libraryName": "mint-ui",
                "style": true
            }]
        ],
        [
            "component", [{
                "libraryName": "element-ui",
                "styleLibraryName": "theme-default"
            }]
        ]
    ]
}

应该是我同时用了两个库的原因，babel-plugin-component找不到第二个库了？ @stackia

可能这个issues提错地方了 😿

然鹅, 改成 import { Message } from 'element-ui/lib/'却有可用了，是不是这个时候根本就没走babel-plugin-component 😂

[QingWei-Li]

数组并不是让你传两遍

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

[cnweibo]

@QingWei-Li ,弱弱地问下，这个.babelrc应该是放在哪里的啊？

[NewFuture]

@cnweibo 项目目录里面 https://babeljs.io/docs/usage/babelrc/#lookup-behavior

也可以写在package.json里面

[cnweibo]

@NewFuture ,多谢，我已经搞好了！

[xiaobinwu]

babel的配置 { "presets": [ ["es2015", { "modules": false }] ], "plugins": [ ["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" } ]] ] } .vue文件 import Vue from 'vue' import { Button, Slider } from 'element-ui' // 引入组件 Vue.use(Button) Vue.use(Slider) export default { name: 'example', data () { return { message: 'Welcome to Your Vue.js App', value1: 0 } } }

结构样式掉了，这是什么问题呀

[Jialufeng]

厉害 vue element-ui 组件库是pc mint-ui 组件库是移动端，怎么会在一起使用？

[whutyzy]

@xiaobinwu 时间有点久了，你那个问题是 styleLibrayName写错了，应该是 theme-chalk

[tanxuewei]

@xiaobinwu 我也发现了这个问题，我用的element1.x版本，应该就是theme-default呀