plugin development - Using @wordpressscripts 28.x with WordPress <6.5

admin管理员组

文章数量:1122846

I am currently looking for a way to use the current @wordpress/scripts 28.x in a plugin with WordPress 6.5 or older. According to the tip here, you should deliver the jsx-runtime via webpack, but create it separately so that it is not included in the assets.

This script for me means that only the react-jsx-runtime.js is generated and no JS and style files:

const path = require('path');

const reactJSXRuntimePolyfill = {
  entry: {
    'react-jsx-runtime': {
      import: 'react/jsx-runtime',
    },
  },
  output: {
    filename: 'react-jsx-runtime.js',
    path: path.resolve(__dirname, 'build'),
    library: {
      name: 'ReactJSXRuntime',
      type: 'window',
    },
  },
  externals: {
    react: 'React',
  },
};

module.exports = [ reactJSXRuntimePolyfill ];

I then extended the script so that the missing files are also generated via a 2nd module in webpack, and the react-jsx-runtime.js is also generated:

const path = require('path');
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

const reactJSXRuntimePolyfill = {
  mode: defaultConfig.mode,
  target: defaultConfig.target,
  plugins: defaultConfig.plugins,
  entry: {
    'react-jsx-runtime': {
      import: 'react/jsx-runtime',
    },
  },
  output: {
    filename: 'react-jsx-runtime.js',
    path: path.resolve(__dirname, 'build'),
    library: {
      name: 'ReactJSXRuntime',
      type: 'window',
    },
  },
  externals: {
    react: 'React',
  },
};

module.exports = [ reactJSXRuntimePolyfill, defaultConfig ];

Problem here: the JS files still contain the JSX runtime and therefore cannot be used with WordPress < 6.5. The runtime is still in the assets file. I can easily remove it from there:

// embed script.
        $script_asset = require $script_asset_path;

        // check for jsx-support.
        if ( ! wp_script_is( 'react-jsx-runtime', 'registered' ) ) {
            $script_asset['dependencies'] = array_filter( $script_asset['dependencies'], fn ( $m ) => 'react-jsx-runtime' !== $m );
        }

        // embed the script.
        wp_enqueue_script(
            'my-handle',
            $url . 'build/index.js',
            $script_asset['dependencies'],
            $script_asset['version'],
            true
        );

But how can I remove the JSX Runtime from the generated JavaScripts? These only have the following imports:

import './style.scss';
import { Button, Modal } from '@wordpress/components';
import { React } from 'react'
import { render } from 'react-dom';

本文标签： plugin developmentUsing wordpressscripts 28x with WordPress lt65