使用 jsx 时按需加载的问题

g0ne150 commented 7 years ago

代码：

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']
        );
    }
}));

浏览器控制台输出：

babelrc:

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

webpack版本： 2.4.1

g0ne150 commented 7 years ago

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

AmBeta commented 6 years ago

+1 got the same problem

ElementUI / babel-plugin-component

使用 jsx 时按需加载的问题 #15