WordPress.org

Make WordPress Core

Opened 8 weeks ago

Last modified 7 days ago

#49423 new enhancement

Build: Create Webpack build configuration for vendor dependencies

Reported by: aduth Owned by:
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Build/Test Tools Keywords: has-patch needs-testing
Focuses: javascript Cc:

Description

Related: #49360, #46110 (could be considered a blocker for #49360)

The current process for including third-party JavaScript dependencies (jQuery, Moment, etc) occurs as a combination of:

For both of these, they are performed as simple file copying from node_modules.

This has a few downsides, related to depending on the package to prepackage "browser-ready" scripts:

  • Cannot use a package if it uses CommonJS or other module import semantics (See: ticket:49360#comment:6)
  • Cannot use a package if its code is not transpiled to run in ES5 environments like Internet Explorer (see #46110)
  • We must run Uglify minification directly for packages if it does not include a minified distributable

All of these problems could be addressed by incorporating the vendor dependencies into the Webpack build process.

  • Webpack can resolve module import semantics and output browser-ready artifacts
  • When configured to use the package's default entrypoint (package.json main) and assuming that entrypoint is ES5-ready, the output should also be ES5-ready. Note that the problems of #46110 are a bit more nuanced, related to upstream issues of the package in question. We probably want to expect that dependencies are already transpiled; ideally we would not need to incorporate something like Babel as part of this configuration.
  • Webpack has built-in minification handling.

This could technically be done within the existing packages configuration, but there's enough differences between packages and vendor scripts (both technically and conceptually) that it would make sense to extract this to its own configuration. There is already precedent here with having a separate configuration for media scripts.

See attached patch for proposed implementation.

Attachments (4)

49423-vendor-webpack.diff (6.4 KB) - added by aduth 8 weeks ago.
49423-vendor-webpack-2.diff (26.1 KB) - added by aduth 5 weeks ago.
49423-vendor-webpack-3.diff (26.0 KB) - added by bookdude13 5 weeks ago.
Refreshed patch for #49360
editor erros.PNG (47.5 KB) - added by bookdude13 5 weeks ago.
Errors on edit page

Download all attachments as: .zip

Change History (17)

#1 @aduth
8 weeks ago

Note that the problems of #46110 are a bit more nuanced, related to upstream issues of the package in question. We probably want to expect that dependencies are already transpiled; ideally we would not need to incorporate something like Babel as part of this configuration.

To elaborate on this, specifically in regards to #46110.

I expect that 49423-vendor-webpack.diff would fix #46110.

This is because the entrypoint of formdata-polyfill is the minified copy:

https://github.com/jimmywarting/FormData/blob/e52a90ceb2e3424e5e2203760ecaeef21dbc5186/package.json#L5

The minified copy (but not the original source copy) is ES5-ready:

https://unpkg.com/browse/formdata-polyfill@3.0.19/formdata.min.js

Technically this means that both the .js and .min.js versions generated from the build would be minified. I don't see this as strictly problematic, in that (a) we're just using the default entrypoint and (b) while main should be unminified, this is a problem of the upstream package.

#2 @netweb
8 weeks ago

Sounds good, a quick glance I see uglify is removed from the patch, Uglify is still required for the natice JS files included in core to minify the files from the Grunt task here:

https://github.com/WordPress/wordpress-develop/blob/3dd39ffecea808afe86b8071331551d9d5e8cf89/Gruntfile.js#L687-L756

#3 follow-up: @aduth
8 weeks ago

@netweb Does that require the uglify package directly? I expect it should be satisfied by grunt-contrib-uglify:

https://github.com/WordPress/wordpress-develop/blob/3dd39ffe/package.json#L48

I'm able to run the task without error even after uninstalling uglify.

I noticed after removing the package that package-lock.json doesn't change much, indicating that there's other dependencies which still rely on it (I assume this one included).

Version 0, edited 8 weeks ago by aduth (next)

#4 in reply to: ↑ 3 @netweb
7 weeks ago

  • Keywords commit added
  • Milestone changed from Awaiting Review to 5.4

Replying to aduth:

@netweb Does that require the uglify-js package directly? I expect it should be satisfied by grunt-contrib-uglify:

Right you are, thanks, I tend to forget about those Grunt plugins in this new npm world ;)

This ticket was mentioned in Slack in #core-js by aduth. View the logs.


6 weeks ago

This ticket was mentioned in Slack in #core by mike. View the logs.


6 weeks ago

#7 @bookdude13
6 weeks ago

  • Keywords needs-refresh added; commit removed

After building with this patch, I'm getting a 404 on wp-polyfill.js (url: http://localhost/wordpress-develop/src/wp-includes/js/dist/vendor/wp-polyfill.js?ver=7.4.4). Showing up in chrome and ff when on the root wp-admin page. (Edge not tested)

#8 @aduth
5 weeks ago

There was a small, careless issue in the original patch 49423-vendor-webpack.diff: The Webpack output was configured to wp-includes/js/dist, instead of the correct wp-includes/js/dist/vendor. This is corrected in 49423-vendor-webpack-2.diff .

#9 @bookdude13
5 weeks ago

  • Keywords needs-testing added; needs-refresh removed

Updating keywords so this can get tested

@bookdude13
5 weeks ago

Refreshed patch for #49360

@bookdude13
5 weeks ago

Errors on edit page

#10 @bookdude13
5 weeks ago

  • Keywords needs-refresh added; needs-testing removed

After the changes in #34960 this patch needed refreshing. It cleanly applies, but getting some include errors on the edit page and I don't have time now to figure out why.

#11 @bookdude13
5 weeks ago

  • Keywords needs-testing added; needs-refresh removed

Never mind, my build environment wasn't clean between testing stuff. Latest patch works.

This ticket was mentioned in Slack in #core by bookdude13. View the logs.


3 weeks ago

#13 @SergeyBiryukov
7 days ago

  • Milestone changed from 5.4 to 5.5
Note: See TracTickets for help on using tickets.