2.3 KiB
Legacy Build
Table of Contents
This folder is used to hold any components/code that will get exported to the legacy build.
Currently, builds in this folder target WP < 5.3
When you add a file, add it in the same folder structure as the root.
So for example, if the original file was in:
assets/js/base/components/label/index.js
Then the legacy version will be located in:
assets/js/legacy/base/components/label/index.js
Note: you must copy all files related to the entry point for that module according to the path aliased.
Legacy builds will be identical to the main builds except:
- files will have a
-legacysuffix (so server can conditionally enqueue). It is expected that the server will load either the main or the legacy bundles, not both. - any imports not in the legacy folder will fallback to the main file.
How does the legacy system work?
Short answer, through the magic of WebPack! Long answer:
Aliases
We use aliases for paths covering anything that might need a legacy version. Then we have a dedicated builds for main and legacy code.
Current aliases are:
@woocommerce/base-components->assets/js/base/components/@woocommerce/base-hocs->assets/js/base/hocs/@woocommerce/editor-components->assets/js/editor-components@woocommerce/block-hocs->assets/js/block-hocs
When importing, if outside the module referenced by that path, import from the alias. That will ensure that at compile time the bundles can pull from the appropriate location.
Example:
// will pull from '/assets/js/base/components/label/index.js in the main build
// will pull from '/assets/js/legacy/base/components/label/index.js in the legacy
// build.
import { Label } from '@woocommerce/base-components/label';
We're hiring! Come work with us!
🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.