ElementUI / babel-plugin-component

Modular element-ui build plugin for babel.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

使用 jsx 时按需加载的问题

g0ne150 opened this issue · comments

代码:

import Vue from 'vue'
import { Button } from 'element-ui'
console.log(Button)
export default Vue.extend({
    render: function (h) {
        return <Button>Hello element-ui</Button>
    }
})

webpack 输出:

/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_element_ui_lib_theme_default_button_css__ = __webpack_require__(18);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_element_ui_lib_theme_default_button_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_element_ui_lib_theme_default_button_css__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_element_ui_lib_theme_default_base_css__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_element_ui_lib_theme_default_base_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_element_ui_lib_theme_default_base_css__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_element_ui_lib_button__ = __webpack_require__(16);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_element_ui_lib_button___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_element_ui_lib_button__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_vue__ = __webpack_require__(1);

console.log(__WEBPACK_IMPORTED_MODULE_2_element_ui_lib_button___default.a);
/* harmony default export */ __webpack_exports__["a"] = (__WEBPACK_IMPORTED_MODULE_3_vue__["default"].extend({
    render: function (h) {
        return h(
            Button,
            null,
            ['Hello element-ui']
        );
    }
}));

浏览器控制台输出:
image

babelrc:

{
    "presets": [],
    "plugins": [
        "transform-vue-jsx",
        ["component",[{
                    "libraryName": "element-ui",
                     "styleLibraryName": "theme-default"
        }]]]
}

webpack版本: 2.4.1

import Vue from 'vue'
import { Button } from 'element-ui'
console.log(Button)
export default Vue.extend({
    render: function (h) {
        return <Button>Hello element-ui</Button>
    }
})

改成如下,就没毛病了

import Vue from 'vue'
import { Button } from 'element-ui'
console.log(Button)
const Ebtn = Button  // 这样就 OK 了
export default Vue.extend({
    render: function (h) {
        return <Ebtn>Hello element-ui</Ebtn>
    }
})

+1 got the same problem