Anonymous
Как собрать каждый файл js и css vite по определенному пути
Сообщение
Anonymous » 16 сен 2024, 19:50
Обновлено!!!
Я попробовал приведенный ниже код, и он поместил все мои файлы JS в правильную структуру папок, но, к сожалению, он не работает для файлов CSS. . Может ли кто-нибудь мне помочь?
Код: Выделить всё
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";
export default defineConfig({
build: {
outDir: "public/build/assets",
rollupOptions: {
input: {
"js/app": path.resolve(__dirname, "resources/js/app.js"),
"js/bootstrap": path.resolve(
__dirname,
"resources/js/bootstrap.js"
),
"js/vendor": path.resolve(__dirname, "resources/js/vendor.js"),
"js/sockets/all": path.resolve(
__dirname,
"resources/js/sockets/all.js"
),
"js/layouts/smart": path.resolve(
__dirname,
"resources/js/layouts/smart.js"
),
"js/libraries/cs": path.resolve(
__dirname,
"resources/js/libraries/cs.js"
),
"js/libraries/skin": path.resolve(
__dirname,
"resources/js/libraries/skin.js"
),
"js/libraries/vertex": path.resolve(
__dirname,
"resources/js/libraries/vertex.js"
),
"js/libraries/widget": path.resolve(
__dirname,
"resources/js/libraries/widget.js"
),
"js/app/layouts/bxslider": path.resolve(
__dirname,
"resources/js/app/layouts/bxslider.js"
),
"js/app/layouts/page": path.resolve(
__dirname,
"resources/js/app/layouts/page.js"
),
"js/app/layouts/portal": path.resolve(
__dirname,
"resources/js/app/layouts/portal.js"
),
"js/app/modules/admin/managing/listing": path.resolve(
__dirname,
"resources/js/app/modules/admin/managing/listing.js"
),
"js/app/modules/admin/member/member": path.resolve(
__dirname,
"resources/js/app/modules/admin/member/member.js"
),
"js/config/core/dev/app": path.resolve(
__dirname,
"resources/js/config/core/dev/app.js"
),
"css/app": path.resolve(__dirname, "resources/css/app.css"),
"css/vendor": path.resolve(
__dirname,
"resources/css/vendor.css"
),
"css/app/layouts/cms": path.resolve(
__dirname,
"resources/css/app/layouts/cms.css"
),
"css/app/layouts/auth": path.resolve(
__dirname,
"resources/css/app/layouts/auth.css"
),
"css/app/layouts/page": path.resolve(
__dirname,
"resources/css/app/layouts/page.css"
),
"css/app/layouts/admin": path.resolve(
__dirname,
"resources/css/app/layouts/admin.css"
),
"css/app/layouts/portal": path.resolve(
__dirname,
"resources/css/app/layouts/portal.css"
),
},
output: {
entryFileNames: (chunkInfo) => {
if (chunkInfo.name.startsWith("js/")) {
return `${chunkInfo.name}.js`; // Avoid adding 'js/' again
}
if (chunkInfo.name.startsWith("css/")) {
return `${chunkInfo.name}.css`; // Avoid adding 'css/' again
}
return `${chunkInfo.name}.js`; // Default
},
chunkFileNames: (chunkInfo) => {
if (chunkInfo.name.startsWith("js/")) {
return `${chunkInfo.name}.js`; // Same logic for chunks
}
if (chunkInfo.name.startsWith("css/")) {
return `${chunkInfo.name}.css`;
}
return `${chunkInfo.name}.js`; // Default
},
assetFileNames: (assetInfo) => {
if (assetInfo.name?.endsWith(".css")) {
// Place general CSS files in the correct folder
if (assetInfo.name.includes("layouts")) {
return `css/app/layouts/[name].[hash][extname]`;
}
return `css/[name].[hash][extname]`;
}
if (assetInfo.name?.endsWith(".js")) {
return `js/[name].[hash][extname]`;
}
return `assets/[name].[hash][extname]`;
},
sourcemap: true,
},
},
},
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/css/vendor.css",
"resources/css/app/layouts/cms.css",
"resources/css/app/layouts/auth.css",
"resources/css/app/layouts/page.css",
"resources/css/app/layouts/admin.css",
"resources/css/app/layouts/portal.css",
"resources/js/app.js",
"resources/js/bootstrap.js",
"resources/js/vendor.js",
"resources/js/sockets/all.js",
"resources/js/layouts/smart.js",
"resources/js/libraries/cs.js",
"resources/js/libraries/skin.js",
"resources/js/libraries/vertex.js",
"resources/js/libraries/widget.js",
"resources/js/app/layouts/bxslider.js",
"resources/js/app/layouts/page.js",
"resources/js/app/layouts/portal.js",
"resources/js/app/modules/admin/managing/listing.js",
"resources/js/app/modules/admin/member/member.js",
"resources/js/config/core/dev/app.js",
],
refresh: true,
}),
],
});
Старый вопрос!!
Я хочу добиться того же способа, что и ниже, с помощью Vite,
Ниже код, который я пробовал, но все файлы js и cs встроены в папку public/build/assets. Но мне нужно что-то вроде этого.
Например,
resources/css/ app.js
необходимо хранить внутри public/build/assets/css/app.js
resources/css /admin/member/index.js
необходимо хранить внутри public/build/assets/css/admin/member/index.js
resources/css/admin/lead/index.js
необходимо хранить внутри public/build/assets/css/admin/lead/index.js
**
Это аналогично и для файлов JS.**
Ниже приведен код, который я пробовал.
Код: Выделить всё
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
export default defineConfig({
build: {
outDir: "public/build",
},
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/css/vendor.css",
"resources/css/app/layouts/cms.css",
"resources/css/app/layouts/auth.css",
"resources/css/app/layouts/page.css",
"resources/css/app/layouts/admin.css",
"resources/css/app/layouts/portal.css",
"resources/js/app.js",
"resources/js/bootstrap.js",
"resources/js/vendor.js",
"resources/js/sockets/all.js",
"resources/js/layouts/smart.js",
"resources/js/libraries/cs.js",
"resources/js/libraries/skin.js",
"resources/js/libraries/vertex.js",
"resources/js/libraries/widget.js",
"resources/js/app/layouts/bxslider.js",
"resources/js/app/layouts/page.js",
"resources/js/app/layouts/portal.js",
"resources/js/app/modules/admin/managing/listing.js",
"resources/js/app/modules/admin/member/member.js",
"resources/js/config/core/dev/app.js",
],
refresh: true,
}),
],
});
Может ли кто-нибудь помочь мне это исправить? Я впервые использую Vite. В настоящее время я пытаюсь вручную обновить проект Laravel 5.2 до Laravel 10. Поэтому я стараюсь сохранить большую часть файловой структуры прежней.
Подробнее здесь:
https://stackoverflow.com/questions/789 ... cific-path
1726505422
Anonymous
[b]Обновлено!!![/b] Я попробовал приведенный ниже код, и он поместил все мои файлы JS в правильную структуру папок, но, к сожалению, он не работает для файлов CSS. . Может ли кто-нибудь мне помочь? [img]https://i.sstatic.net/fzYDWmN6.png[/img] [code]import { defineConfig } from "vite"; import laravel from "laravel-vite-plugin"; import path from "path"; export default defineConfig({ build: { outDir: "public/build/assets", rollupOptions: { input: { "js/app": path.resolve(__dirname, "resources/js/app.js"), "js/bootstrap": path.resolve( __dirname, "resources/js/bootstrap.js" ), "js/vendor": path.resolve(__dirname, "resources/js/vendor.js"), "js/sockets/all": path.resolve( __dirname, "resources/js/sockets/all.js" ), "js/layouts/smart": path.resolve( __dirname, "resources/js/layouts/smart.js" ), "js/libraries/cs": path.resolve( __dirname, "resources/js/libraries/cs.js" ), "js/libraries/skin": path.resolve( __dirname, "resources/js/libraries/skin.js" ), "js/libraries/vertex": path.resolve( __dirname, "resources/js/libraries/vertex.js" ), "js/libraries/widget": path.resolve( __dirname, "resources/js/libraries/widget.js" ), "js/app/layouts/bxslider": path.resolve( __dirname, "resources/js/app/layouts/bxslider.js" ), "js/app/layouts/page": path.resolve( __dirname, "resources/js/app/layouts/page.js" ), "js/app/layouts/portal": path.resolve( __dirname, "resources/js/app/layouts/portal.js" ), "js/app/modules/admin/managing/listing": path.resolve( __dirname, "resources/js/app/modules/admin/managing/listing.js" ), "js/app/modules/admin/member/member": path.resolve( __dirname, "resources/js/app/modules/admin/member/member.js" ), "js/config/core/dev/app": path.resolve( __dirname, "resources/js/config/core/dev/app.js" ), "css/app": path.resolve(__dirname, "resources/css/app.css"), "css/vendor": path.resolve( __dirname, "resources/css/vendor.css" ), "css/app/layouts/cms": path.resolve( __dirname, "resources/css/app/layouts/cms.css" ), "css/app/layouts/auth": path.resolve( __dirname, "resources/css/app/layouts/auth.css" ), "css/app/layouts/page": path.resolve( __dirname, "resources/css/app/layouts/page.css" ), "css/app/layouts/admin": path.resolve( __dirname, "resources/css/app/layouts/admin.css" ), "css/app/layouts/portal": path.resolve( __dirname, "resources/css/app/layouts/portal.css" ), }, output: { entryFileNames: (chunkInfo) => { if (chunkInfo.name.startsWith("js/")) { return `${chunkInfo.name}.js`; // Avoid adding 'js/' again } if (chunkInfo.name.startsWith("css/")) { return `${chunkInfo.name}.css`; // Avoid adding 'css/' again } return `${chunkInfo.name}.js`; // Default }, chunkFileNames: (chunkInfo) => { if (chunkInfo.name.startsWith("js/")) { return `${chunkInfo.name}.js`; // Same logic for chunks } if (chunkInfo.name.startsWith("css/")) { return `${chunkInfo.name}.css`; } return `${chunkInfo.name}.js`; // Default }, assetFileNames: (assetInfo) => { if (assetInfo.name?.endsWith(".css")) { // Place general CSS files in the correct folder if (assetInfo.name.includes("layouts")) { return `css/app/layouts/[name].[hash][extname]`; } return `css/[name].[hash][extname]`; } if (assetInfo.name?.endsWith(".js")) { return `js/[name].[hash][extname]`; } return `assets/[name].[hash][extname]`; }, sourcemap: true, }, }, }, plugins: [ laravel({ input: [ "resources/css/app.css", "resources/css/vendor.css", "resources/css/app/layouts/cms.css", "resources/css/app/layouts/auth.css", "resources/css/app/layouts/page.css", "resources/css/app/layouts/admin.css", "resources/css/app/layouts/portal.css", "resources/js/app.js", "resources/js/bootstrap.js", "resources/js/vendor.js", "resources/js/sockets/all.js", "resources/js/layouts/smart.js", "resources/js/libraries/cs.js", "resources/js/libraries/skin.js", "resources/js/libraries/vertex.js", "resources/js/libraries/widget.js", "resources/js/app/layouts/bxslider.js", "resources/js/app/layouts/page.js", "resources/js/app/layouts/portal.js", "resources/js/app/modules/admin/managing/listing.js", "resources/js/app/modules/admin/member/member.js", "resources/js/config/core/dev/app.js", ], refresh: true, }), ], }); [/code] Старый вопрос!! Я хочу добиться того же способа, что и ниже, с помощью Vite, [img]https://i.sstatic.net/Cbaz4HAr.png[/img] [b]Ниже код, который я пробовал, но все файлы js и cs встроены в папку public/build/assets. Но мне нужно что-то вроде этого.[/b] Например, resources/css/ app.js [b]необходимо хранить внутри[/b] public/build/assets/css/app.js resources/css /admin/member/index.js [b]необходимо хранить внутри[/b] public/build/assets/css/admin/member/index.js resources/css/admin/lead/index.js [b]необходимо хранить внутри[/b] public/build/assets/css/admin/lead/index.js ** Это аналогично и для файлов JS.** Ниже приведен код, который я пробовал. [code]import { defineConfig } from "vite"; import laravel from "laravel-vite-plugin"; export default defineConfig({ build: { outDir: "public/build", }, plugins: [ laravel({ input: [ "resources/css/app.css", "resources/css/vendor.css", "resources/css/app/layouts/cms.css", "resources/css/app/layouts/auth.css", "resources/css/app/layouts/page.css", "resources/css/app/layouts/admin.css", "resources/css/app/layouts/portal.css", "resources/js/app.js", "resources/js/bootstrap.js", "resources/js/vendor.js", "resources/js/sockets/all.js", "resources/js/layouts/smart.js", "resources/js/libraries/cs.js", "resources/js/libraries/skin.js", "resources/js/libraries/vertex.js", "resources/js/libraries/widget.js", "resources/js/app/layouts/bxslider.js", "resources/js/app/layouts/page.js", "resources/js/app/layouts/portal.js", "resources/js/app/modules/admin/managing/listing.js", "resources/js/app/modules/admin/member/member.js", "resources/js/config/core/dev/app.js", ], refresh: true, }), ], }); [/code] Может ли кто-нибудь помочь мне это исправить? Я впервые использую Vite. В настоящее время я пытаюсь вручную обновить проект Laravel 5.2 до Laravel 10. Поэтому я стараюсь сохранить большую часть файловой структуры прежней. Подробнее здесь: [url]https://stackoverflow.com/questions/78988440/how-to-build-vite-each-js-and-css-files-in-a-specific-path[/url]