viruscamp / vue-cli-plugin-auto-import-tags

Auto import vue components by tags. Should be used along with using [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) or [babel-plugin-transform-imports](https://github.com/viruscamp/babel-plugin-transform-imports/tree/babel-7).

Repository from Github https://github.comviruscamp/vue-cli-plugin-auto-import-tagsRepository from Github https://github.comviruscamp/vue-cli-plugin-auto-import-tags

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