打包问题 - Githubissues

Aolef commented 6 months ago

问题：升级最新版本1.2.1后，不配置externals的情况下，打包业务库后，import业务库进来的是个promise。如果配置了externals，就会报错没有render方法。1.1.3就没有这个问题。请问这是为啥？使用场景：使用v-charts2开发一个业务库 vue版本：2 引用方式：各业务组件自己引用和注册 import VeBar from '@v-charts2/bar' components: { VeBar }, 打包配置（问题中已描述，分为配置和不配置两种情况）： externals: [ /^echarts.*/, '@v-charts2/bar', '@v-charts2/gauge', '@v-charts2/heatmap', '@v-charts2/histogram', '@v-charts2/line', '@v-charts2/liquidfill', '@v-charts2/map', '@v-charts2/pie', '@v-charts2/ring', '@v-charts2/scatter' ]

Aolef commented 6 months ago

找到原因了，组件代码中出现了await import('./vue3/v-charts.bar.mjs')，导致export 出来的是一个promise，vue2中import进来的是一个Promise对象，无法直接注册，是否应该将await import替换回require？

vxhly commented 6 months ago

请仔细阅读以下这段代码：

if (useVueVersion() === 2) {
  VeBar = require('./vue2/v-charts.bar.mjs')
} else {
  VeBar = await import('./vue3/v-charts.bar.mjs')
}

只有你当前的 vue 版本号为 3 时才会采用 await import

vxhly commented 6 months ago

本仓库已经提供了 vite 构建工具导入例子，请进行查阅。

在使用 vue2、vue3 兼容导入时因本地的 vue 版本与本库 lib 包版本会有所冲突，所以需要在构建时将其进行排除处理，下方提供 vite 构建工具的排除方案。

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import commonjs from 'vite-plugin-commonjs'
import packageJson from './package.json'

const deps = Object.keys(packageJson.dependencies)

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [createVuePlugin(), commonjs()],
  build: {
    minify: 'esbuild',
    target: 'esnext',
    emptyOutDir: true,
    rollupOptions: {
      // 忽略打包vue文件
      external(id) {
        return deps.some(k => new RegExp(`^${k}`).test(id))
      }
    }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import packageJson from './package.json'

const deps = Object.keys(packageJson.dependencies)

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'esbuild',
    target: 'esnext',
    emptyOutDir: true,
    rollupOptions: {
      // 忽略打包vue文件
      external(id) {
        return deps.some(k => new RegExp(`^${k}`).test(id))
      }
    }
  }
})

最佳的导入方案请在确认当前的 vue 版本之后进行, 请尽可能避免采用兼容的导入方案

import VeBar from '@v-charts2/bar/vue2'

import VeBar from '@v-charts2/bar/vue3'

vxhly commented 6 months ago

如果你有其他的构建工具的例子（请在自我测试能够正常显示正常打包确认无任何报错信息之后提交 PR）可以进行提交 PR

vxhly commented 6 months ago

找到原因了，组件代码中出现了await import('./vue3/v-charts.bar.mjs')，导致export 出来的是一个promise，vue2中import进来的是一个Promise对象，无法直接注册，是否应该将await import替换回require？

在本仓库查阅例子之后仍然未能解决问题，请提供详细的例子和报错信息

WoolenWang commented 1 month ago

pnpm使用webpack 4.47.0 vue 2.6.14 的时候会有告警: WARNING in ./node_modules/.pnpm/@v-charts2+chart@1.0.1_echarts@5.5.1_vue@2.6.14/node_modules/@v-charts2/chart/lib/vue3/v-charts.chart.es.js 1113:6-11 "export 'watch' was not found in 'vue' @ ./node_modules/.pnpm/@v-charts2+chart@1.0.1_echarts@5.5.1_vue@2.6.14/node_modules/@v-charts2/chart/lib/index.js @ ./src/main.js

WARNING in ./node_modules/.pnpm/@v-charts2+chart@1.0.1_echarts@5.5.1_vue@2.6.14/node_modules/@v-charts2/chart/lib/vue3/v-charts.chart.es.js 1137:12-17 "export 'watch' was not found in 'vue' @ ./node_modules/.pnpm/@v-charts2+chart@1.0.1_echarts@5.5.1_vue@2.6.14/node_modules/@v-charts2/chart/lib/index.js @ ./src/main.js

貌似useVueVersion的判断是不能生效?

denaro-org / v-charts2

打包问题 #8