10up
Try/add dependency extraction plugin webpack
Description of the Change
This PR introduces the DependencyExtractionWebpackPlugin plugin that is used as part of the @wordpress/scripts package.
This plugin will convert calls to dependencies via import statements to access them on the appropriate global.
For example
import { registerPlugin } from '@wordpress/plugins
is converted to
var { registerPlugin } = wp.plugins
In addition, the plugin generates an assets.php file with dependencies and version number for each entry point.
The PR also makes changes to how the scaffold sets up the wp_enqueue_script calls to automate the process as much as possible.
Benefits
This plugin will automate generating a list of script dependencies and version numbers for each entry point in the Webpack config. This means that once it's been set up by the scaffold, engineers won't need to manually add dependencies to the array or manually bump the plugin version number to break caching.
Possible Drawbacks
To use this functionality, engineers must use import statements instead of pulling items from the global.
For example,const { registerPlugin } = wp.plugins becomesimport { registerPlugin } from '@wordpress/plugins.
This may seem counter-intuitive as we don't install those packages with the project.
Checklist:
- [x] I have read the CONTRIBUTING document.
- [x] My code follows the code style of this project.
- [x] My change requires a change to the documentation.
- [x] I have updated the documentation accordingly.
- [x] I have added tests to cover my change.
- [x] All new and existing tests passed.
Applicable Issues
Changelog Entry
@ryanwelcher Like we discussed I like the concept. But I'd really really want to see CSS files in the version numbers also.
I've been using Webpack manifest plugin for the automated cache busting. It creates .json file which under some circumstances might not be the fastest file to read.
@timwright12 @ryanwelcher I feel like this can be useful for themes as well. I know for sure some projects ships custom blocks with themes
Do we need this when 10up scripts might be on the horizon?
10up scripts should abstract this away.
@nicholasio @samikeijonen wondering if we can move this forward?
@samikeijonen: This change will make using any wp-* packages easier in JavaScript and save time by having dependencies managed automatically outside. Perhaps we can look at addressing the CSS versioning in separate issue?