Friday, May 26, 2023
HomePHPNew in Symfony 6.3: AssetMapper Element (Symfony Blog Site)

New in Symfony 6.3: AssetMapper Element (Symfony Blog Site)

Ryan Weaver

Kévin Dunglas

Dealing with internet properties in internet tasks is a constantly transforming attribute. Internet browsers
and also front-end innovations advance a great deal and also Symfony needs to adjust to them. In the
past, Symfony consisted of Assetic as an internet possession managing pipe. It can
integrate, assemble and also filter properties prior to offering them in your application.

In 2017, we presented Webpack Repetition as a contemporary choice to Assetic
based upon Webpack and also with countless attributes to manage your internet properties. It can be
a little bit frustrating to newbies, once established, this possession structure pipe
is easy to handle and also functions wonderful.

Although we more than happy with the Webpack Repetition based remedy, web browsers have
lately included assistance for a game-changing attribute called import maps
An import map is a JSON things that informs the internet browser exactly how to settle components
when importing JavaScript components. It maps the component names to their places
( as loved one courses or outright Links).

For instance, if you include this to the HTML of your website:

You can make use of the complying with in your JavaScript code:

You do not require to construct and also assemble the properties The internet browser can discover the
built/compiled components in the paths/URLs supplied by the import map.
In Symfony 6.3 we’re presenting a brand-new AssetMapper part which enables
you to make use of import maps to manage your properties. This part makes unneeded
to make use of Webpack, Webpack Repetition, Node.js, yarn/npm, and so on

The part is split right into 2 highlights:

  1. An attribute to map properties to openly offered and also versioned courses;
  2. An attribute to make use of import maps in your front-end code.

Right here’s a fast summary of exactly how this part functions when mapping properties:

( 1 ) Trigger the possession mapmaker by informing Symfony the course that will certainly be utilized
to offer them:

( 2 ) Place your built/compiled properties in the << your-project>>/ properties/ directory site
( this coincides you do when utilizing Webpack Repetition):

( 3 ) Describe those properties with the regular possession() feature that you understand:

That’s all The last courses utilized by the internet browser will resemble this:

Exactly how does it function behind the scenes?

  • In the dev setting, an audience obstructs the demands to the course
    that you set up earlier ( properties/ in this instance), locates the documents in the
    resource << your-project>>/ properties/ directory site, and also returns it;
  • In the prod setting, you run a brand-new properties: mapmaker: assemble command,
    which duplicates every one of the properties right into public/assets/ to ensure that the actual documents
    are returned. This command likewise unloads a public/assets/manifest. json to ensure that
    the resource courses (e.g. styles/app. css) can be traded for their last courses promptly.

Inside, this part gives a standard compiler to do points like upgrading
the worth of link() declarations consisted of in CSS documents, to upgrade the Links in
the resource maps, and so on. We’re not recreating Assetic, yet we require to give these
standard collection attributes to make this part beneficial.

The import maps attribute consisted of in AssetMapper part functions as complies with.
In your JavaScript code, you import components similarly as prior to:

The distinction is that currently you do not need to make use of npm/yarn to set up those
JavaScript reliances. Rather, run the importmap: call for command to
” set up” those reliances:

This command will certainly develop or upgrade an importmap.php at the origin of your task:

The last action is to include the brand-new {{importmap()}} feature inside the
<< head>> tag of all your web pages. Completion outcome will certainly be something like:

There are numerous various other wonderful attributes supplied by AssetMapper. We’re still creating
the docs for it and also we want to have them all set not long after the Symfony 6.3 launch.


Most Popular

Recent Comments