Element: 按需加载似乎有问题

Created on 29 Dec 2016 · 16Comments · Source: ElemeFE/element

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 ***

Source

NewFuture

Most helpful comment

数组并不是让你传两遍

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

QingWei-Li on 30 Dec 2016

❤3

All 16 comments

antd ？？

reverland on 29 Dec 2016

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

jikkai on 29 Dec 2016

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

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

NewFuture on 29 Dec 2016

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

jikkai on 29 Dec 2016

看了一下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 on 29 Dec 2016

没有装antd相关 @jikkai @reverland

❔ 好奇怪

NewFuture on 29 Dec 2016

楼主把 .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'

stackia on 30 Dec 2016

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 😂

NewFuture on 30 Dec 2016

数组并不是让你传两遍

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

QingWei-Li on 30 Dec 2016

❤3

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

cnweibo on 4 Jan 2017

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

也可以写在package.json里面

NewFuture on 4 Jan 2017

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

cnweibo on 5 Jan 2017

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
}
}
}