是否可以制作 Vue highcharts 组件库？

Question

我只是迫切需要一个答案，但有希望在这里找到答案。

我使用了以下东西：

"vite": "^2.7.13",
"highcharts": "^9.3.3",
"highcharts-vue": "^1.4.0"

我想制作一个包含 highcharts 图表的 vue 组件库。我尝试使用这样的汇总配置制作条形图：

import vue from "rollup-plugin-vue";
import typescript from "rollup-plugin-typescript2";
import resolve from "rollup-plugin-node-resolve";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import cleaner from "rollup-plugin-cleaner";
import commonjs from "@rollup/plugin-commonjs";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import image from '@rollup/plugin-image';

const plugins = [
  resolve(),
  typescript({
    check: false,
    useTsconfigDeclarationDir: true,
  }),
  vue({
    preprocessStyles: true,
    css: false,
    template: {
      isProduction: true,
      
    },
    
  }),
  peerDepsExternal(),
  commonjs(),
  postcss({
    extensions: [".css"],
  }),
  image(),
];


const AppChart = [
  {
    input: "./demo-v3/src/components/Chart.vue",
    output: [
      {
        format: "esm",
        file: "./demo-v3/lib/UI/AppChart/index.js",
      },
    ],
    external: ["@vue"],
    plugins: [...plugins,   commonjs({
      namedExports: {
        "node_modules/highcharts-vue/dist/highcharts-vue.min.js": ["Chart"],
      },
    }),],
    
  },
];

const config = [...AppChart];

export default config;

我的组件 BarChart.vue 如下所示：

<template>
  <div class="chart-wrapper">
    <Chart :chart-options="lineChartOptions" />
  </div>
</template>

<script setup lang="ts">
import Chart from "./CommonChart.vue";

const props = defineProps({
  chartData: {
    type: Object,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {},
  },
});

const exportingOptions = () => {
  return {
    buttons: {
      contextButton: {
        menuItems: [
          "viewFullscreen",
          "separator",
          "downloadPNG",
          "downloadPDF",
          "printChart",
          "separator",
          "downloadCSV",
          "downloadXLS",
        ],
      },
    },
  };
};

let lineChartOptions = {
  ...props.chartData,
  exporting: exportingOptions(),
  credits: { enabled: false },
};
</script>

<style lang="scss">
.chart-wrapper {
  padding: 15px;
  width: 1140px;
  height: 440px;
  border: 1px solid #c4c4c4;
}
</style>

还有一个常见的图表组件如下所示：

<template>
  <highcharts class="hc" :options="chartOptions" />
</template>

<script setup lang="ts">
import { Chart as highcharts } from "highcharts-vue";
import Highcharts from "highcharts";

const props = defineProps({
  chartOptions: {
    type: Object,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {},
  },
});
</script>

它在我使用 BarChart 时有效，但在与 rollup 捆绑后无效。

我有什么地方做错了吗？

Answer 1

我的同事找到了本指南，其中的设置适合我。

我把它留在这里，以防找不到相同的人： https://dev.to/shubhadip/vue-3-component-library-270p

更新： https://devsday.ru/blog/details/73660 - vite 可以构建库 out-of-box。我没有尝试过这种方式，但怀疑它运作良好。与往常一样，我应该仔细查看 throw 文档

是否可以制作 Vue highcharts 组件库？

Is it possible to make a library of Vue highcharts components?

javascript

vue.js

highcharts

rollup