Skip to content

Basic From-Scratch Extension

Latest
Compare
Choose a tag to compare
@fikrirasyid fikrirasyid released this 19 Feb 04:49
· 58 commits to main since this release

This tag / release marks the very minimum setup needed to for building D5i extension from scratch. The code is extracted from D5i codebase (we already have custom modal named divi/dev-state-monitor for dev purpose) with TS related typing being removed (we're currently building this as JS source, implementing TS will be done later). The challenging part is setting up the webpack configuration which is why you'll find the webpack configuration is heavily annotated for educational purpose.

The webpack config does the very minimum required to bundle the source file into bundled script / styles:

  • Setting up entry file
  • Setting up externals so exposed library that is available as global variable can be used
  • Setting up loaders for handling jsx, css, and scss files
  • Setting up MiniCssExtractPlugin so the css or scss that is imported into component is properly extracted into its own file
  • Setting up resolve for extension so files can be imported without extension
  • Setting up the bundle output

The PHP part of this extension only do:

  • Add custom menu on admin bar
  • Enqueue scripts and styles on visual builder (D5i)