Closed Vincz closed 2 years ago
Vite does so by adding the following to vite.config.js
build: {
manifest: true,
outDir: './dist/build',
}
This will create a manifest.json
in the outDir
directory.
I don't know if this is a standard format or identical to Webpack's output so Encore/Twig accept it, but here's one entry:
"src/utils/cqfill.js": {
"file": "cqfill.261abc4c.js",
"src": "src/utils/cqfill.js",
"isDynamicEntry": true
},
haven't tested this yet 'cos I'm still on Encore/Webpack bundle, trying to migrate away to use Vite and Rollup. I hope this package does the job :D
Doesn't seem to include images (in public/resources/images
) it copies from the public
to public/build
. They are not included in the manifest.json.
Hi @Vincz ,
The manifest created by Webpack encore bundle and that of Vite are not the same. so it cannot be used in this state by the twig asset
function.
However, there would still be solutions.
We can generate an assets.json
compatible file and specify the name of the file in the Symfony configuration.
# config/packages/assets.yaml
framework:
assets:
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
but before I would like to know what is the point of doing all this? if the assets are imported in a js file we don't have to worry about it. if not why not put the files directly in the public folder and use your asset twig function ?
Hi Hugues.
Yes, you are right, we could still convert the manifest or maybe create a new asset resolver (I can look into it if you want).
The point is that sometimes, even if the app is fully JS (react, vue, etc...), we need some ways to access the assets for email for example or for a PHP page or something and in this case, it's nice to be able to use the assets from the ./assets
folder without having to copy them into the public
directory.
I am going to propose something to you, and on the other hand I would like you to give me your opinion on it before putting this in a new version
hello @Vincz and @WebMechanic @well-made can you please give me your feedback of the #19 ?
you will have to clone the lhapaipai/vite-bundle and lhapaipai/vite-plugin-symfony repositories.
git clone https://github.com/lhapaipai/vite-plugin-symfony.git
cd vite-plugin-symfony
git checkout feature/asset
npm install
npm run dev
cd ..
git clone https://github.com/lhapaipai/vite-bundle.git
cd vite-bundle
git chekcout feature/asset
In your symfony projet, update your composer.json
{
"repositories": [
{
"type": "path",
"url": "<path-to-your>/vite-bundle"
}
]
}
composer install
and
npm install <path-to-your>/vite-plugin-symfony
in order to have a package.json
like this
{
"dependencies": {
"vite": "^2.9.13",
"vite-plugin-symfony": "file:<path-to-your>/vite-plugin-symfony"
}
}
note that this new version use vite 2.9 Documentation can be found here : https://github.com/lhapaipai/vite-bundle/tree/feature/asset#symfony-asset-component
If you have question don't hesitate.
There is a small problem that I couldn't solve. if you specify a wrong asset path the application will not crash with the dev server soon but only after compiling.
indeed I did not find a way to retrieve the list of assets with the dev server because no manifest file is generated by vite
This is an interesting discussion. I'm using vite-bundle and trying to use the asset
to load a css file in a twig template.
I tried adding the path to the css file into vite config as an entrypoint:
build: {
manifest: true,
emptyOutDir: true,
assetsDir: '',
outDir: 'public/build/',
rollupOptions: {
input: {
app: resolve(__dirname, './src/main.ts'),
tinymce: resolve(__dirname, './css/tinymce.css'),
},
},
},
but when i run vite builld
i'm getting this error: [symfony] Entrypoint css/tinymce.css not defined in the manifest error during build:...
Is it possible that the fix you are discussing would help with this problem?
Also if i don't add the entrypoint, the css file is generated but it is not included into the manifest
hi @AnnaYuS, I think this PR #19 can resolve your problem.
Another way can be to create new twig functions vite_entry_css_file(s)
/ vite_entry_js_file(s)
to get only the url of your entrypoints.
you can test this PR and give me your feedback. I don't use these features too much so I prefer to have feedback before merging.
I've managed to solve the problem that i had without using asset
. It's more of a workaround because i do not use url for the css file. The import path in js needs to have ?inline
:
import contentCss from '../css/tinymce.css?inline'
then it's not loaded into the page head as style, but is processed and returned as a string and then can be added where it's needed.
I would think that this should work for css assets https://vitejs.dev/guide/assets.html#explicit-url-imports but in prod
mode the url becomes base64 data URL and this doesn't work in my case
and with ?url
like in https://vitejs.dev/guide/assets.html#explicit-url-imports
Hi with this new version of vite-bundle (v2.0) we have a compatible bundle with vitejs v3 and we have symfony assets management. check the doc for the configuration of the ViteAssetVersionStrategy
https://github.com/lhapaipai/vite-bundle#symfony-asset-component.
Enjoy
It would be great to be able to use the
asset
symfony helper with the bundle. The way it works usually is by reading a manifest file in the build directory in order to resolve the asset path. Not sure if it is possible to generate such a file with vite but it would be awesome.