Generated code was not processed by babel-plugin-import/babel-plugin-transform-imports
viruscamp opened this issue · comments
The reason is my generated code was not processed by babel-plugin-import or babel-plugin-transform-imports.
My generated code:
import { Table as ATable } from 'ant-design-vue'
import { Icon as AIcon } from 'ant-design-vue'
export default function (Component) {
const c = Component.options.components
if (c.ATable == null) c.ATable = ATable
if (c.AIcon == null) c.AIcon = AIcon
}
was translated to:
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ant-design-vue */ "./node_modules/ant-design-vue/dist/antd.min.js");
/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ant_design_vue__WEBPACK_IMPORTED_MODULE_0__);
/* harmony default export */ __webpack_exports__["default"] = (function (Component) {
const c = Component.options.components
if (c.ATable == null) c.ATable = ant_design_vue__WEBPACK_IMPORTED_MODULE_0__["Table"]
if (c.AIcon == null) c.AIcon = ant_design_vue__WEBPACK_IMPORTED_MODULE_0__["Icon"]
});
What it generated below. It does not processed by babel-plugin-import, it's not load-on-demand, and no style is loaded
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ant-design-vue */ "./node_modules/ant-design-vue/dist/antd.min.js");
/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ant_design_vue__WEBPACK_IMPORTED_MODULE_0__);
const autoImports = []
autoImports.push({fullName: 'AButton', tag: 'a-button', component: ant_design_vue__WEBPACK_IMPORTED_MODULE_0__["Button"]})
autoImports.push({fullName: 'APagination', tag: 'a-pagination', component: ant_design_vue__WEBPACK_IMPORTED_MODULE_0__["Pagination"]})
autoImports.push({fullName: 'AAbc', tag: 'a-abc', component: ant_design_vue__WEBPACK_IMPORTED_MODULE_0__["Abc"]})
/* harmony default export */ __webpack_exports__["default"] = (function (Component) {
const c = Component.options.components
autoImports.forEach(i => {
if (c[i.fullName] == null) c[i.fullName] = i.component
})
});
Because the generated file was not processed by babel-plugin-import, so it not their bug.
const autoImports = []
import { Button as AButton } from 'ant-design-vue'
autoImports.push({fullName: 'AButton', tag: 'a-button', component: AButton})
import { Pagination as APagination } from 'ant-design-vue'
autoImports.push({fullName: 'APagination', tag: 'a-pagination', component: APagination})
import { Abc as AAbc } from 'ant-design-vue'
autoImports.push({fullName: 'AAbc', tag: 'a-abc', component: AAbc})
export default function (Component) {
const c = Component.options.components
autoImports.forEach(i => {
if (c[i.fullName] == null) c[i.fullName] = i.component
})
}