babel-plugin-component
babel-plugin-component copied to clipboard
使用 jsx 时按需加载的问题
代码:
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
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