In my Vue3 project, I have configured it with typescript and a main.ts entry file that has a single default export.
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;
I am looking to create a single ES Module bundle to integrate into a private platform with specific requirements:
The app’s bundle must be a JavaScript ES Module;
The default export of the app must be an object to handle the app’s lifecycle (the
AppLifecycleobject above)
A boilerplate project (React + Typescript) provided me with the following webpack configuration:
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 uses webpack4 underneath, and the configuration can be adjusted using a webpack chain in vue.config.js. Additionally, vue-cli can specify a target like --target lib, but I am unsure if ES modules are supported this way. I have tried the following configuration, but I am unsure if it is the correct approach.
module.exports = {
chainWebpack: (config) => {
config.optimization.set("splitChunks", false);
config.plugins.delete("prefetch");
config.plugins.delete("preload");
},
css: {
extract: false,
},
filenameHashing: false,
};
I have not found detailed resources on how to specifically build a single ES Module with a single typescript entry file using Vue3, so I am reaching out for guidance here. Thank you in advance.