将VueJS 3应用程序构建为单个ES模块包？

Question

我有一个Vue3项目，我配置了一个类型记录和一个带有一个默认导出的main.ts条目文件。

import { App, createApp } from "vue";
import { createIntl } from "vue-intl";

import Application from "./App.vue";
import { AppProps, Settings } from "types";

let appRef = {} as App<Element>;

const AppLifecycle = {
  mount: (container: HTMLElement, appProps: AppProps, settings: Settings) => {
    const { themeUrl, userPreferences } = settings;
    const { language } = userPreferences;

    appRef = createApp(Application, { ...appProps, themeUrl });
    appRef.use(
      createIntl({
        locale: language,
        defaultLocale: "en",
        messages: messages[language],
      })
    );
    appRef.mount(container);
  },
  unmount: (_: HTMLElement) => {
    appRef.unmount();
  },
};

export default AppLifecycle;

我希望将其构建为一个单独的ES模块包，以便将其集成到具有此要求的私有平台中：

应用程序的包必须是JavaScript ES模块；应用程序的默认导出必须是处理应用程序生命周期的对象(上面的AppLifecycle对象)

从一个样板项目(用React +打字稿写)，他们使用了以下webpack的配置：

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.tsx",
  experiments: {
    outputModule: true,
  },
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
    library: {
      type: "module",
    },
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: "css-loader",
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

据我所知，Vue3使用的是引擎盖下的webpack4，配置可以调优，直到在一定程度上使用vue.config.js内部的webpack链。此外，可以使用vue-cli来指定目标(例如--target lib)，但我认为ES模块不支持这种方式。我已经尝试使用以下配置，但我不知道这是否是正确的方式。

module.exports = {
  chainWebpack: (config) => {
    config.optimization.set("splitChunks", false);
    config.plugins.delete("prefetch");
    config.plugins.delete("preload");
  },
  css: {
    extract: false,
  },
  filenameHashing: false,
};

我没有找到任何关于如何使用Vue3构建一个带有单个类型记录输入文件的单独ES模块的详细资源，所以我在这里问。提前谢谢。

Answer 1

我通过将vue-cli升级到版本5解决了这个问题，在各种更改中，考虑到了处理ES模块生成https://next.cli.vuejs.org/migrations/migrate-from-v4.html#webpack-5的Webpack 5

我已经更改了vue.config.js文件，使其与我发布的样板文件兼容。如下所示：

module.exports = {
  configureWebpack: {
    entry: "./src/main.ts",
    experiments: {
      outputModule: true,
    },
    optimization: {
      splitChunks: false,
    },
    output: {
      library: {
        type: "module",
      },
    },
  },
  chainWebpack: (config) => {
    config.plugins.delete("prefetch");
    config.plugins.delete("preload");
  },
  css: {
    extract: false,
  },
  filenameHashing: false,
};

我更喜欢这个解决方案，而不是像Estus Flask所建议的那样使用Vite，因为我不知道这个工具，我更喜欢坚持Webpack和目标平台使用的相同。