我有一個 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 Typescript 撰寫）中，他們使用以下 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/,
},
],
},
};
From what I've understood Vue3 comes using webpack4 under the hood and the configuration can be tuned, till a certain degree, using a webpack chain inside vue.config.js. Moreover, the vue-cli can be used to specify a target (for instance --target lib) but I don't think ES modules are supported this way. I've made an attempt using the following configuration but I don't know if this is the right way.
module.exports = {
chainWebpack: (config) => {
config.optimization.set("splitChunks", false);
config.plugins.delete("prefetch");
config.plugins.delete("preload");
},
css: {
extract: false,
},
filenameHashing: false,
};
I didn't find any detailed resources on how to build specifically a single ES Module with a single typescript entry file using Vue3 so I'm asking here. Thanks in advance.
uj5u.com熱心網友回復：
我通過升級vue-cli到版本 5解決了這個問題，其中各種更改考慮到了處理 ES 模塊生成的 Webpack 5 https://next.cli.vuejs.org/migrations/migrate-from-v4.html#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。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406592.html
標籤：