@esmx/rspack-vue 3.0.0-rc.47 → 3.0.0-rc.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -1
- package/dist/index.mjs +1 -1
- package/dist/loaders/index.d.ts +3 -0
- package/dist/loaders/index.mjs +3 -0
- package/dist/{vue2-loader.d.ts → loaders/vue2-dev-hmr.d.ts} +2 -2
- package/dist/loaders/vue2-dev-hmr.mjs +8 -0
- package/dist/loaders/vue2-server-render.d.ts +3 -0
- package/dist/{vue2-loader.mjs → loaders/vue2-server-render.mjs} +4 -7
- package/dist/{vue3-loader.d.ts → loaders/vue3-server-render.d.ts} +1 -1
- package/dist/{vue3-loader.mjs → loaders/vue3-server-render.mjs} +3 -2
- package/dist/vue-app.mjs +93 -0
- package/dist/vue.d.ts +0 -54
- package/dist/vue.mjs +1 -1
- package/package.json +5 -5
- package/src/index.ts +3 -1
- package/src/loaders/index.ts +3 -0
- package/src/loaders/vue2-dev-hmr.ts +12 -0
- package/src/{vue2-loader.ts → loaders/vue2-server-render.ts} +5 -9
- package/src/{vue3-loader.ts → loaders/vue3-server-render.ts} +3 -2
- package/src/vue-app.ts +128 -0
- package/src/vue.ts +1 -55
- package/dist/vue-core.mjs +0 -86
- package/src/vue-core.ts +0 -101
- /package/dist/{vue-core.d.ts → vue-app.d.ts} +0 -0
package/dist/index.d.ts
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { rspack } from '@esmx/rspack';
|
|
2
|
-
export default function (this: rspack.LoaderContext, text: string):
|
|
3
|
-
export declare const
|
|
2
|
+
export default function (this: rspack.LoaderContext, text: string): any;
|
|
3
|
+
export declare const vue2DevHmrLoader: string;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { fileURLToPath } from "node:url";
|
|
2
|
+
const FIX_ESM = `api.install(require('vue').default)`;
|
|
3
|
+
export default function(text) {
|
|
4
|
+
return text.replaceAll(`api.install(require('vue'))`, FIX_ESM);
|
|
5
|
+
}
|
|
6
|
+
export const vue2DevHmrLoader = fileURLToPath(
|
|
7
|
+
import.meta.resolve(import.meta.url)
|
|
8
|
+
);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { fileURLToPath } from "node:url";
|
|
2
|
-
const FIX_ESM = `api.install(require('vue').default)`;
|
|
3
2
|
const ADD_IMPORT = `
|
|
4
3
|
function initImport () {
|
|
5
4
|
const mixins = Array.isArray(component.options.mixins) ? component.options.mixins : [];
|
|
@@ -14,10 +13,8 @@ initImport();
|
|
|
14
13
|
export default component.exports
|
|
15
14
|
`;
|
|
16
15
|
export default function(text) {
|
|
17
|
-
|
|
18
|
-
if (typeof this.target === "string" && this.target.includes("node")) {
|
|
19
|
-
text = text.replaceAll("export default component.exports", ADD_IMPORT);
|
|
20
|
-
}
|
|
21
|
-
return text;
|
|
16
|
+
return text.replaceAll("export default component.exports", ADD_IMPORT);
|
|
22
17
|
}
|
|
23
|
-
export const
|
|
18
|
+
export const vue2ServerRenderLoader = fileURLToPath(
|
|
19
|
+
import.meta.resolve(import.meta.url)
|
|
20
|
+
);
|
|
@@ -2,7 +2,6 @@ import { fileURLToPath } from "node:url";
|
|
|
2
2
|
const ADD_IMPORT = `
|
|
3
3
|
import { useSSRContext } from 'vue';
|
|
4
4
|
function initImport () {
|
|
5
|
-
|
|
6
5
|
const mixins = Array.isArray(__exports__.mixins) ? __exports__.mixins : [];
|
|
7
6
|
mixins.push({
|
|
8
7
|
created () {
|
|
@@ -17,4 +16,6 @@ initImport();
|
|
|
17
16
|
export default function(text) {
|
|
18
17
|
return text + ADD_IMPORT;
|
|
19
18
|
}
|
|
20
|
-
export const
|
|
19
|
+
export const vue3ServerRenderLoader = fileURLToPath(
|
|
20
|
+
import.meta.resolve(import.meta.url)
|
|
21
|
+
);
|
package/dist/vue-app.mjs
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { fileURLToPath } from "node:url";
|
|
2
|
+
import { createRspackHtmlApp, rspack } from "@esmx/rspack";
|
|
3
|
+
import { VueLoaderPlugin as VueLoader2Plugin } from "vue-loader-v15";
|
|
4
|
+
import { VueLoaderPlugin as VueLoader3Plugin } from "vue-loader-v17";
|
|
5
|
+
import {
|
|
6
|
+
vue2DevHmrLoader,
|
|
7
|
+
vue2ServerRenderLoader,
|
|
8
|
+
vue3ServerRenderLoader
|
|
9
|
+
} from "./loaders/index.mjs";
|
|
10
|
+
export function createRspackVueApp(esmx, vueType, options) {
|
|
11
|
+
return createRspackHtmlApp(esmx, {
|
|
12
|
+
...options,
|
|
13
|
+
loaders: {
|
|
14
|
+
styleLoader: fileURLToPath(import.meta.resolve("vue-style-loader")),
|
|
15
|
+
...options?.loaders
|
|
16
|
+
},
|
|
17
|
+
chain(context) {
|
|
18
|
+
const { chain, buildTarget, esmx: esmx2 } = context;
|
|
19
|
+
const defineVue = ({
|
|
20
|
+
vue2,
|
|
21
|
+
vue3
|
|
22
|
+
}) => {
|
|
23
|
+
if (vueType === "2") {
|
|
24
|
+
return vue2();
|
|
25
|
+
} else {
|
|
26
|
+
return vue3();
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
chain.resolve.extensions.add(".vue");
|
|
30
|
+
defineVue({
|
|
31
|
+
vue2: () => {
|
|
32
|
+
chain.plugin("vue-loader").use(VueLoader2Plugin);
|
|
33
|
+
},
|
|
34
|
+
vue3: () => {
|
|
35
|
+
chain.plugin("vue-loader").use(VueLoader3Plugin);
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
const vueLoader = fileURLToPath(
|
|
39
|
+
defineVue({
|
|
40
|
+
vue2: () => import.meta.resolve("vue-loader-v15"),
|
|
41
|
+
vue3: () => import.meta.resolve("vue-loader-v17")
|
|
42
|
+
})
|
|
43
|
+
);
|
|
44
|
+
const vueRule = chain.module.rule("vue").test(/\.vue$/);
|
|
45
|
+
vueRule.use("vue-loader").loader(vueLoader).options({
|
|
46
|
+
...options?.vueLoader,
|
|
47
|
+
experimentalInlineMatchResource: true,
|
|
48
|
+
optimizeSSR: buildTarget === "server"
|
|
49
|
+
});
|
|
50
|
+
if (buildTarget === "server") {
|
|
51
|
+
defineVue({
|
|
52
|
+
vue2: () => {
|
|
53
|
+
vueRule.use("vue-server-render-loader").loader(vue2ServerRenderLoader).before("vue-loader");
|
|
54
|
+
},
|
|
55
|
+
vue3: () => {
|
|
56
|
+
vueRule.use("vue-server-render-loader").loader(vue3ServerRenderLoader).before("vue-loader");
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
defineVue({
|
|
61
|
+
vue2: () => {
|
|
62
|
+
if (esmx2.command === esmx2.COMMAND.dev && buildTarget === "client") {
|
|
63
|
+
vueRule.use("vue2-dev-hmr-loader").loader(vue2DevHmrLoader).before("vue-loader");
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
vue3: () => {
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
defineVue({
|
|
70
|
+
vue2: () => {
|
|
71
|
+
chain.resolve.alias.set(
|
|
72
|
+
"vue$",
|
|
73
|
+
"vue/dist/vue.runtime.esm.js"
|
|
74
|
+
);
|
|
75
|
+
},
|
|
76
|
+
vue3: () => {
|
|
77
|
+
chain.resolve.alias.set(
|
|
78
|
+
"vue$",
|
|
79
|
+
esmx2.isProd ? "vue/dist/vue.runtime.esm-browser.prod.js" : "vue/dist/vue.runtime.esm-browser.js"
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
if (buildTarget === "client") {
|
|
84
|
+
chain.plugin("define-vue-env").use(rspack.DefinePlugin, [
|
|
85
|
+
{
|
|
86
|
+
"process.env.VUE_ENV": JSON.stringify(buildTarget)
|
|
87
|
+
}
|
|
88
|
+
]);
|
|
89
|
+
}
|
|
90
|
+
options?.chain?.(context);
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
}
|
package/dist/vue.d.ts
CHANGED
|
@@ -1,61 +1,7 @@
|
|
|
1
1
|
import type { Esmx } from '@esmx/core';
|
|
2
2
|
import type { RspackHtmlAppOptions } from '@esmx/rspack';
|
|
3
3
|
export interface RspackVueAppOptions extends RspackHtmlAppOptions {
|
|
4
|
-
/**
|
|
5
|
-
* vue-loader 配置项
|
|
6
|
-
*
|
|
7
|
-
* 用于配置 Vue 单文件组件的编译选项,完整选项参考:
|
|
8
|
-
* https://github.com/vuejs/vue-loader
|
|
9
|
-
*/
|
|
10
4
|
vueLoader?: Record<string, any>;
|
|
11
5
|
}
|
|
12
|
-
/**
|
|
13
|
-
* 创建 Vue 2 应用构建器
|
|
14
|
-
*
|
|
15
|
-
* @param esmx - Esmx 实例
|
|
16
|
-
* @param options - Rspack Vue 应用配置项
|
|
17
|
-
* @returns 返回一个 Promise,解析为构建好的应用实例
|
|
18
|
-
*
|
|
19
|
-
* @example
|
|
20
|
-
* ```ts
|
|
21
|
-
* import type { EsmxOptions } from '@esmx/core';
|
|
22
|
-
*
|
|
23
|
-
* export default {
|
|
24
|
-
* async devApp(esmx) {
|
|
25
|
-
* return import('@esmx/rspack-vue').then((m) =>
|
|
26
|
-
* m.createRspackVue2App(esmx, {
|
|
27
|
-
* config({ config }) {
|
|
28
|
-
* // 自定义 Rspack 配置
|
|
29
|
-
* }
|
|
30
|
-
* })
|
|
31
|
-
* );
|
|
32
|
-
* }
|
|
33
|
-
* } satisfies EsmxOptions;
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
36
6
|
export declare function createRspackVue2App(esmx: Esmx, options?: RspackVueAppOptions): Promise<import("@esmx/core").App>;
|
|
37
|
-
/**
|
|
38
|
-
* 创建 Vue 3 应用构建器
|
|
39
|
-
*
|
|
40
|
-
* @param esmx - Esmx 实例
|
|
41
|
-
* @param options - Rspack Vue 应用配置项
|
|
42
|
-
* @returns 返回一个 Promise,解析为构建好的应用实例
|
|
43
|
-
*
|
|
44
|
-
* @example
|
|
45
|
-
* ```ts
|
|
46
|
-
* import type { EsmxOptions } from '@esmx/core';
|
|
47
|
-
*
|
|
48
|
-
* export default {
|
|
49
|
-
* async devApp(esmx) {
|
|
50
|
-
* return import('@esmx/rspack-vue').then((m) =>
|
|
51
|
-
* m.createRspackVue3App(esmx, {
|
|
52
|
-
* config({ config }) {
|
|
53
|
-
* // 自定义 Rspack 配置
|
|
54
|
-
* }
|
|
55
|
-
* })
|
|
56
|
-
* );
|
|
57
|
-
* }
|
|
58
|
-
* } satisfies EsmxOptions;
|
|
59
|
-
* ```
|
|
60
|
-
*/
|
|
61
7
|
export declare function createRspackVue3App(esmx: Esmx, options?: RspackVueAppOptions): Promise<import("@esmx/core").App>;
|
package/dist/vue.mjs
CHANGED
package/package.json
CHANGED
|
@@ -56,15 +56,15 @@
|
|
|
56
56
|
"vue": ">=2.7.8 || >=3.0.0"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@esmx/rspack": "3.0.0-rc.
|
|
59
|
+
"@esmx/rspack": "3.0.0-rc.49",
|
|
60
60
|
"vue-loader-v15": "npm:vue-loader@15.11.1",
|
|
61
61
|
"vue-loader-v17": "npm:vue-loader@^17.4.2",
|
|
62
62
|
"vue-style-loader": "^4.1.3"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@biomejs/biome": "1.9.4",
|
|
66
|
-
"@esmx/core": "3.0.0-rc.
|
|
67
|
-
"@esmx/lint": "3.0.0-rc.
|
|
66
|
+
"@esmx/core": "3.0.0-rc.49",
|
|
67
|
+
"@esmx/lint": "3.0.0-rc.49",
|
|
68
68
|
"@types/node": "^24.0.0",
|
|
69
69
|
"@vitest/coverage-v8": "3.2.4",
|
|
70
70
|
"stylelint": "16.21.0",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"unbuild": "3.5.0",
|
|
73
73
|
"vitest": "3.2.4"
|
|
74
74
|
},
|
|
75
|
-
"version": "3.0.0-rc.
|
|
75
|
+
"version": "3.0.0-rc.49",
|
|
76
76
|
"type": "module",
|
|
77
77
|
"private": false,
|
|
78
78
|
"exports": {
|
|
@@ -91,5 +91,5 @@
|
|
|
91
91
|
"template",
|
|
92
92
|
"public"
|
|
93
93
|
],
|
|
94
|
-
"gitHead": "
|
|
94
|
+
"gitHead": "640eb582ee922d64bf47ed38bb8d6ce9cb2369e4"
|
|
95
95
|
}
|
package/src/index.ts
CHANGED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { fileURLToPath } from 'node:url';
|
|
2
|
+
import type { rspack } from '@esmx/rspack';
|
|
3
|
+
|
|
4
|
+
const FIX_ESM = `api.install(require('vue').default)`;
|
|
5
|
+
|
|
6
|
+
export default function (this: rspack.LoaderContext, text: string) {
|
|
7
|
+
return text.replaceAll(`api.install(require('vue'))`, FIX_ESM);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const vue2DevHmrLoader = fileURLToPath(
|
|
11
|
+
import.meta.resolve(import.meta.url)
|
|
12
|
+
);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { fileURLToPath } from 'node:url';
|
|
2
2
|
import type { rspack } from '@esmx/rspack';
|
|
3
|
-
|
|
3
|
+
|
|
4
4
|
const ADD_IMPORT = `
|
|
5
5
|
function initImport () {
|
|
6
6
|
const mixins = Array.isArray(component.options.mixins) ? component.options.mixins : [];
|
|
@@ -16,13 +16,9 @@ export default component.exports
|
|
|
16
16
|
`;
|
|
17
17
|
|
|
18
18
|
export default function (this: rspack.LoaderContext, text: string) {
|
|
19
|
-
|
|
20
|
-
text = text.replaceAll(`api.install(require('vue'))`, FIX_ESM);
|
|
21
|
-
// 添加 CSS 依赖收集
|
|
22
|
-
if (typeof this.target === 'string' && this.target.includes('node')) {
|
|
23
|
-
text = text.replaceAll('export default component.exports', ADD_IMPORT);
|
|
24
|
-
}
|
|
25
|
-
return text;
|
|
19
|
+
return text.replaceAll('export default component.exports', ADD_IMPORT);
|
|
26
20
|
}
|
|
27
21
|
|
|
28
|
-
export const
|
|
22
|
+
export const vue2ServerRenderLoader = fileURLToPath(
|
|
23
|
+
import.meta.resolve(import.meta.url)
|
|
24
|
+
);
|
|
@@ -4,7 +4,6 @@ import type { rspack } from '@esmx/rspack';
|
|
|
4
4
|
const ADD_IMPORT = `
|
|
5
5
|
import { useSSRContext } from 'vue';
|
|
6
6
|
function initImport () {
|
|
7
|
-
|
|
8
7
|
const mixins = Array.isArray(__exports__.mixins) ? __exports__.mixins : [];
|
|
9
8
|
mixins.push({
|
|
10
9
|
created () {
|
|
@@ -21,4 +20,6 @@ export default function (this: rspack.LoaderContext, text: string) {
|
|
|
21
20
|
return text + ADD_IMPORT;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
|
-
export const
|
|
23
|
+
export const vue3ServerRenderLoader = fileURLToPath(
|
|
24
|
+
import.meta.resolve(import.meta.url)
|
|
25
|
+
);
|
package/src/vue-app.ts
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { fileURLToPath } from 'node:url';
|
|
2
|
+
import type { Esmx } from '@esmx/core';
|
|
3
|
+
import { createRspackHtmlApp, rspack } from '@esmx/rspack';
|
|
4
|
+
import { VueLoaderPlugin as VueLoader2Plugin } from 'vue-loader-v15';
|
|
5
|
+
import { VueLoaderPlugin as VueLoader3Plugin } from 'vue-loader-v17';
|
|
6
|
+
import {
|
|
7
|
+
vue2DevHmrLoader,
|
|
8
|
+
vue2ServerRenderLoader,
|
|
9
|
+
vue3ServerRenderLoader
|
|
10
|
+
} from './loaders';
|
|
11
|
+
import type { RspackVueAppOptions } from './vue';
|
|
12
|
+
|
|
13
|
+
type VueType = '2' | '3';
|
|
14
|
+
|
|
15
|
+
export function createRspackVueApp(
|
|
16
|
+
esmx: Esmx,
|
|
17
|
+
vueType: VueType,
|
|
18
|
+
options?: RspackVueAppOptions
|
|
19
|
+
) {
|
|
20
|
+
return createRspackHtmlApp(esmx, {
|
|
21
|
+
...options,
|
|
22
|
+
loaders: {
|
|
23
|
+
styleLoader: fileURLToPath(import.meta.resolve('vue-style-loader')),
|
|
24
|
+
...options?.loaders
|
|
25
|
+
},
|
|
26
|
+
chain(context) {
|
|
27
|
+
const { chain, buildTarget, esmx } = context;
|
|
28
|
+
const defineVue = <T>({
|
|
29
|
+
vue2,
|
|
30
|
+
vue3
|
|
31
|
+
}: { vue2: () => T; vue3: () => T }) => {
|
|
32
|
+
if (vueType === '2') {
|
|
33
|
+
return vue2();
|
|
34
|
+
} else {
|
|
35
|
+
return vue3();
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
chain.resolve.extensions.add('.vue');
|
|
40
|
+
|
|
41
|
+
defineVue({
|
|
42
|
+
vue2: () => {
|
|
43
|
+
chain.plugin('vue-loader').use(VueLoader2Plugin);
|
|
44
|
+
},
|
|
45
|
+
vue3: () => {
|
|
46
|
+
chain.plugin('vue-loader').use(VueLoader3Plugin);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
const vueLoader = fileURLToPath(
|
|
51
|
+
defineVue({
|
|
52
|
+
vue2: () => import.meta.resolve('vue-loader-v15'),
|
|
53
|
+
vue3: () => import.meta.resolve('vue-loader-v17')
|
|
54
|
+
})
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
const vueRule = chain.module.rule('vue').test(/\.vue$/);
|
|
58
|
+
|
|
59
|
+
vueRule
|
|
60
|
+
.use('vue-loader')
|
|
61
|
+
.loader(vueLoader)
|
|
62
|
+
.options({
|
|
63
|
+
...options?.vueLoader,
|
|
64
|
+
experimentalInlineMatchResource: true,
|
|
65
|
+
optimizeSSR: buildTarget === 'server'
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
if (buildTarget === 'server') {
|
|
69
|
+
defineVue({
|
|
70
|
+
vue2: () => {
|
|
71
|
+
vueRule
|
|
72
|
+
.use('vue-server-render-loader')
|
|
73
|
+
.loader(vue2ServerRenderLoader)
|
|
74
|
+
.before('vue-loader');
|
|
75
|
+
},
|
|
76
|
+
vue3: () => {
|
|
77
|
+
vueRule
|
|
78
|
+
.use('vue-server-render-loader')
|
|
79
|
+
.loader(vue3ServerRenderLoader)
|
|
80
|
+
.before('vue-loader');
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
defineVue({
|
|
86
|
+
vue2: () => {
|
|
87
|
+
if (
|
|
88
|
+
esmx.command === esmx.COMMAND.dev &&
|
|
89
|
+
buildTarget === 'client'
|
|
90
|
+
) {
|
|
91
|
+
vueRule
|
|
92
|
+
.use('vue2-dev-hmr-loader')
|
|
93
|
+
.loader(vue2DevHmrLoader)
|
|
94
|
+
.before('vue-loader');
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
vue3: () => {}
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
defineVue({
|
|
101
|
+
vue2: () => {
|
|
102
|
+
chain.resolve.alias.set(
|
|
103
|
+
'vue$',
|
|
104
|
+
'vue/dist/vue.runtime.esm.js'
|
|
105
|
+
);
|
|
106
|
+
},
|
|
107
|
+
vue3: () => {
|
|
108
|
+
chain.resolve.alias.set(
|
|
109
|
+
'vue$',
|
|
110
|
+
esmx.isProd
|
|
111
|
+
? 'vue/dist/vue.runtime.esm-browser.prod.js'
|
|
112
|
+
: 'vue/dist/vue.runtime.esm-browser.js'
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
if (buildTarget === 'client') {
|
|
118
|
+
chain.plugin('define-vue-env').use(rspack.DefinePlugin, [
|
|
119
|
+
{
|
|
120
|
+
'process.env.VUE_ENV': JSON.stringify(buildTarget)
|
|
121
|
+
}
|
|
122
|
+
]);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
options?.chain?.(context);
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
}
|
package/src/vue.ts
CHANGED
|
@@ -1,69 +1,15 @@
|
|
|
1
1
|
import type { Esmx } from '@esmx/core';
|
|
2
2
|
import type { RspackHtmlAppOptions } from '@esmx/rspack';
|
|
3
|
-
import { createRspackVueApp } from './vue-
|
|
3
|
+
import { createRspackVueApp } from './vue-app';
|
|
4
4
|
|
|
5
5
|
export interface RspackVueAppOptions extends RspackHtmlAppOptions {
|
|
6
|
-
/**
|
|
7
|
-
* vue-loader 配置项
|
|
8
|
-
*
|
|
9
|
-
* 用于配置 Vue 单文件组件的编译选项,完整选项参考:
|
|
10
|
-
* https://github.com/vuejs/vue-loader
|
|
11
|
-
*/
|
|
12
6
|
vueLoader?: Record<string, any>;
|
|
13
7
|
}
|
|
14
8
|
|
|
15
|
-
/**
|
|
16
|
-
* 创建 Vue 2 应用构建器
|
|
17
|
-
*
|
|
18
|
-
* @param esmx - Esmx 实例
|
|
19
|
-
* @param options - Rspack Vue 应用配置项
|
|
20
|
-
* @returns 返回一个 Promise,解析为构建好的应用实例
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```ts
|
|
24
|
-
* import type { EsmxOptions } from '@esmx/core';
|
|
25
|
-
*
|
|
26
|
-
* export default {
|
|
27
|
-
* async devApp(esmx) {
|
|
28
|
-
* return import('@esmx/rspack-vue').then((m) =>
|
|
29
|
-
* m.createRspackVue2App(esmx, {
|
|
30
|
-
* config({ config }) {
|
|
31
|
-
* // 自定义 Rspack 配置
|
|
32
|
-
* }
|
|
33
|
-
* })
|
|
34
|
-
* );
|
|
35
|
-
* }
|
|
36
|
-
* } satisfies EsmxOptions;
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
39
9
|
export function createRspackVue2App(esmx: Esmx, options?: RspackVueAppOptions) {
|
|
40
10
|
return createRspackVueApp(esmx, '2', options);
|
|
41
11
|
}
|
|
42
12
|
|
|
43
|
-
/**
|
|
44
|
-
* 创建 Vue 3 应用构建器
|
|
45
|
-
*
|
|
46
|
-
* @param esmx - Esmx 实例
|
|
47
|
-
* @param options - Rspack Vue 应用配置项
|
|
48
|
-
* @returns 返回一个 Promise,解析为构建好的应用实例
|
|
49
|
-
*
|
|
50
|
-
* @example
|
|
51
|
-
* ```ts
|
|
52
|
-
* import type { EsmxOptions } from '@esmx/core';
|
|
53
|
-
*
|
|
54
|
-
* export default {
|
|
55
|
-
* async devApp(esmx) {
|
|
56
|
-
* return import('@esmx/rspack-vue').then((m) =>
|
|
57
|
-
* m.createRspackVue3App(esmx, {
|
|
58
|
-
* config({ config }) {
|
|
59
|
-
* // 自定义 Rspack 配置
|
|
60
|
-
* }
|
|
61
|
-
* })
|
|
62
|
-
* );
|
|
63
|
-
* }
|
|
64
|
-
* } satisfies EsmxOptions;
|
|
65
|
-
* ```
|
|
66
|
-
*/
|
|
67
13
|
export function createRspackVue3App(esmx: Esmx, options?: RspackVueAppOptions) {
|
|
68
14
|
return createRspackVueApp(esmx, '3', options);
|
|
69
15
|
}
|
package/dist/vue-core.mjs
DELETED
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { fileURLToPath } from "node:url";
|
|
2
|
-
import { createRspackHtmlApp, rspack } from "@esmx/rspack";
|
|
3
|
-
import { VueLoaderPlugin as VueLoader2Plugin } from "vue-loader-v15";
|
|
4
|
-
import { VueLoaderPlugin as VueLoader3Plugin } from "vue-loader-v17";
|
|
5
|
-
import { vue2Loader } from "./vue2-loader.mjs";
|
|
6
|
-
import { vue3Loader } from "./vue3-loader.mjs";
|
|
7
|
-
export function createRspackVueApp(esmx, vueType, options) {
|
|
8
|
-
return createRspackHtmlApp(esmx, {
|
|
9
|
-
...options,
|
|
10
|
-
loaders: {
|
|
11
|
-
styleLoader: fileURLToPath(import.meta.resolve("vue-style-loader")),
|
|
12
|
-
...options?.loaders
|
|
13
|
-
},
|
|
14
|
-
config(context) {
|
|
15
|
-
const { config, buildTarget } = context;
|
|
16
|
-
config.resolve = {
|
|
17
|
-
...config.resolve,
|
|
18
|
-
extensions: [...config.resolve?.extensions ?? [], ".vue"]
|
|
19
|
-
};
|
|
20
|
-
config.plugins = config.plugins || [];
|
|
21
|
-
switch (vueType) {
|
|
22
|
-
case "2":
|
|
23
|
-
config.plugins.push(new VueLoader2Plugin());
|
|
24
|
-
break;
|
|
25
|
-
case "3":
|
|
26
|
-
config.plugins.push(new VueLoader3Plugin());
|
|
27
|
-
break;
|
|
28
|
-
}
|
|
29
|
-
if (buildTarget === "client") {
|
|
30
|
-
config.plugins.push(
|
|
31
|
-
new rspack.DefinePlugin({
|
|
32
|
-
"process.env.VUE_ENV": JSON.stringify(buildTarget)
|
|
33
|
-
})
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
const vueRuleUse = [
|
|
37
|
-
{
|
|
38
|
-
loader: fileURLToPath(
|
|
39
|
-
import.meta.resolve(
|
|
40
|
-
`vue-loader-v${vueType === "2" ? "15" : "17"}`
|
|
41
|
-
)
|
|
42
|
-
),
|
|
43
|
-
options: {
|
|
44
|
-
...options?.vueLoader,
|
|
45
|
-
experimentalInlineMatchResource: true,
|
|
46
|
-
optimizeSSR: buildTarget === "server"
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
];
|
|
50
|
-
switch (vueType) {
|
|
51
|
-
case "2":
|
|
52
|
-
vueRuleUse.unshift(vue2Loader);
|
|
53
|
-
break;
|
|
54
|
-
case "3":
|
|
55
|
-
vueRuleUse.unshift(vue3Loader);
|
|
56
|
-
break;
|
|
57
|
-
}
|
|
58
|
-
config.module = {
|
|
59
|
-
...config.module,
|
|
60
|
-
rules: [
|
|
61
|
-
...config.module?.rules ?? [],
|
|
62
|
-
{
|
|
63
|
-
test: /\.vue$/,
|
|
64
|
-
use: vueRuleUse
|
|
65
|
-
}
|
|
66
|
-
]
|
|
67
|
-
};
|
|
68
|
-
let vueAlias = null;
|
|
69
|
-
switch (vueType) {
|
|
70
|
-
case "2":
|
|
71
|
-
vueAlias = "vue/dist/vue.esm.js";
|
|
72
|
-
break;
|
|
73
|
-
case "3":
|
|
74
|
-
vueAlias = "vue/dist/vue.runtime.esm-browser.js";
|
|
75
|
-
break;
|
|
76
|
-
}
|
|
77
|
-
if (vueAlias) {
|
|
78
|
-
config.resolve.alias = {
|
|
79
|
-
...config.resolve.alias,
|
|
80
|
-
vue$: vueAlias
|
|
81
|
-
};
|
|
82
|
-
}
|
|
83
|
-
options?.config?.(context);
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
}
|
package/src/vue-core.ts
DELETED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import { fileURLToPath } from 'node:url';
|
|
2
|
-
import type { Esmx } from '@esmx/core';
|
|
3
|
-
import { createRspackHtmlApp, rspack } from '@esmx/rspack';
|
|
4
|
-
import { VueLoaderPlugin as VueLoader2Plugin } from 'vue-loader-v15';
|
|
5
|
-
import { VueLoaderPlugin as VueLoader3Plugin } from 'vue-loader-v17';
|
|
6
|
-
import type { RspackVueAppOptions } from './vue';
|
|
7
|
-
import { vue2Loader } from './vue2-loader';
|
|
8
|
-
import { vue3Loader } from './vue3-loader';
|
|
9
|
-
|
|
10
|
-
type VueType = '2' | '3';
|
|
11
|
-
|
|
12
|
-
export function createRspackVueApp(
|
|
13
|
-
esmx: Esmx,
|
|
14
|
-
vueType: VueType,
|
|
15
|
-
options?: RspackVueAppOptions
|
|
16
|
-
) {
|
|
17
|
-
return createRspackHtmlApp(esmx, {
|
|
18
|
-
...options,
|
|
19
|
-
loaders: {
|
|
20
|
-
styleLoader: fileURLToPath(import.meta.resolve('vue-style-loader')),
|
|
21
|
-
...options?.loaders
|
|
22
|
-
},
|
|
23
|
-
config(context) {
|
|
24
|
-
const { config, buildTarget } = context;
|
|
25
|
-
// 支持 Vue 拓展名
|
|
26
|
-
config.resolve = {
|
|
27
|
-
...config.resolve,
|
|
28
|
-
extensions: [...(config.resolve?.extensions ?? []), '.vue']
|
|
29
|
-
};
|
|
30
|
-
config.plugins = config.plugins || [];
|
|
31
|
-
switch (vueType) {
|
|
32
|
-
case '2':
|
|
33
|
-
// @ts-ignore
|
|
34
|
-
config.plugins.push(new VueLoader2Plugin());
|
|
35
|
-
break;
|
|
36
|
-
case '3':
|
|
37
|
-
config.plugins.push(new VueLoader3Plugin());
|
|
38
|
-
break;
|
|
39
|
-
}
|
|
40
|
-
// 设置 Vue 相关的环境变量
|
|
41
|
-
if (buildTarget === 'client') {
|
|
42
|
-
config.plugins.push(
|
|
43
|
-
new rspack.DefinePlugin({
|
|
44
|
-
'process.env.VUE_ENV': JSON.stringify(buildTarget)
|
|
45
|
-
})
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
// 设置 vue-loader
|
|
49
|
-
const vueRuleUse: rspack.RuleSetUse = [
|
|
50
|
-
{
|
|
51
|
-
loader: fileURLToPath(
|
|
52
|
-
import.meta.resolve(
|
|
53
|
-
`vue-loader-v${vueType === '2' ? '15' : '17'}`
|
|
54
|
-
)
|
|
55
|
-
),
|
|
56
|
-
options: {
|
|
57
|
-
...options?.vueLoader,
|
|
58
|
-
experimentalInlineMatchResource: true,
|
|
59
|
-
optimizeSSR: buildTarget === 'server'
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
];
|
|
63
|
-
switch (vueType) {
|
|
64
|
-
case '2':
|
|
65
|
-
vueRuleUse.unshift(vue2Loader);
|
|
66
|
-
break;
|
|
67
|
-
case '3':
|
|
68
|
-
vueRuleUse.unshift(vue3Loader);
|
|
69
|
-
break;
|
|
70
|
-
}
|
|
71
|
-
config.module = {
|
|
72
|
-
...config.module,
|
|
73
|
-
rules: [
|
|
74
|
-
...(config.module?.rules ?? []),
|
|
75
|
-
{
|
|
76
|
-
test: /\.vue$/,
|
|
77
|
-
use: vueRuleUse
|
|
78
|
-
}
|
|
79
|
-
]
|
|
80
|
-
};
|
|
81
|
-
// 设置 vue 别名
|
|
82
|
-
let vueAlias: string | null = null;
|
|
83
|
-
switch (vueType) {
|
|
84
|
-
case '2':
|
|
85
|
-
vueAlias = 'vue/dist/vue.esm.js';
|
|
86
|
-
break;
|
|
87
|
-
case '3':
|
|
88
|
-
vueAlias = 'vue/dist/vue.runtime.esm-browser.js';
|
|
89
|
-
break;
|
|
90
|
-
}
|
|
91
|
-
if (vueAlias) {
|
|
92
|
-
config.resolve!.alias = {
|
|
93
|
-
...config.resolve!.alias!,
|
|
94
|
-
vue$: vueAlias
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
// 设置自定义配置
|
|
98
|
-
options?.config?.(context);
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
}
|
|
File without changes
|