javascript - WordPress 定制器和 webpack - 公开 wp global

Question

我正在使用 webpack 来打包我的文件。我想添加一个脚本，使我能够即时更改定制器中的设置。

我创建了一个包含我所有定制器功能的类

<?php
/**
 * The Customizer specific functionality.
 *
 * @since   1.0.0
 * @package mytheme
 */

namespace MyTheme\Customizer;

use MyTheme\Helpers as Helpers;

/**
 * Class Customizer
 */
class Customizer {

  /**
   * Global theme name
   *
   * @var string
   *
   * @since 1.0.0
   */
  protected $theme_name;

  /**
   * Global theme version
   *
   * @var string
   *
   * @since 1.0.0
   */
  protected $theme_version;

  /**
   * Initialize class
   *
   * @param array                  $theme_info Load global theme info.
   * @param Helpers\General_Helper $helpers Instance of the General Helpers object.
   *
   * @since 1.0.0
   */
  public function __construct( $theme_info = null, Helpers\General_Helper $helpers ) {
    $this->theme_name    = $theme_info['theme_name'];
    $this->theme_version = $theme_info['theme_version'];

    $this->helpers = $helpers;

  }

  /**
   * Register customizer settings
   *
   * @see add_action('customize_register',$func)
   * @param  \WP_Customize_Manager $wp_customize WP Customize object.
   * @since 1.0.0
   */
  public function register_customizer_settings( \WP_Customize_Manager $wp_customize ) {
    // Abort if selective refresh is not available.
    if ( ! isset( $wp_customize->selective_refresh ) ) {
      return;
    }

    /**
     * Footer section
     */
    $wp_customize->add_section( 'footer_section', array(
        'title'    => esc_html__( 'Footer', 'mytheme' ),
        'priority' => 100,
    ) );

    /**
     * Copyright notice
     */
    $wp_customize->add_setting( 'footer_copyright', array(
        'default'           => '',
        'type'              => 'theme_mod',
        'transport'         => 'postMessage',
        'sanitize_callback' => 'wp_kses_post',
    ) );

    $wp_customize->add_control( 'footer_copyright', array(
        'label'       => esc_html__( 'Footer Copyright Text', 'mytheme' ),
        'section'     => 'footer_section',
        'type'        => 'text',
    ) );
  }

  /**
   * Enqueue live preview script
   *
   * @since 1.0.0
   */
  public function live_preview_enqueue() {
    $customizer_script = '/skin/public/scripts/customizer.js';

    wp_register_script( $this->theme_name . '-customizer', get_template_directory_uri() . $customizer_script, array(), $this->helpers->get_assets_version( $customizer_script ) );
    wp_enqueue_script( $this->theme_name . '-customizer', array( 'jquery', 'customize-preview' ), false );
  }
}

在我加载我的 Action 的另一个类中

private function define_customizer_hooks() {
  $customizer = new Customizer\Customizer( $this->get_theme_info(), new Helpers\General_Helper() );

  $this->loader->add_action( 'customize_register', $customizer, 'register_customizer_settings', 11 );
  $this->loader->add_action( 'customize_preview_init', $customizer, 'live_preview_enqueue' );
}

现在，我可以正常查看我的设置。 页 footer 分 正在显示。但是我的控制台出现错误

jQuery.Deferred exception: wp.customize is not a function TypeError: wp.customize is not a function

customizer.js 看起来像这样

/* global wp */
$(function() {
  wp.customize('footer_copyright', (value) => {
    value.bind((newval) => {
      if ($('.footer__copyright').length) {
        if (newval !== '') {
          if ($('.footer__copyright').hasClass('hide')) {
            $('.footer__copyright').removeClass('hide').text(newval);
          } else {
            $('.footer__copyright').text(newval);
          }
        } else {
          $('.footer__copyright').addClass('hide');
        }
      } else {
        $('.footer__container').append(`<div class="footer__copyright">${newval}</div>`);
      }
    });
  });
});

我的 webpack.config.js 看起来像这样:

/* global process __dirname */

const DEV = process.env.NODE_ENV !== 'production';

const path = require('path');
const webpack = require('webpack');

const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const appPath = `${path.resolve(__dirname)}`;

// Dev Server
const proxyUrl = 'mytheme.test';

// Theme
const themeName = 'mytheme';
const themePath = `/wp-content/themes/${themeName}/skin`;
const themeFullPath = `${appPath}${themePath}`;
const themePublicPath = `${themePath}/public/`;
const themeEntry = `${themeFullPath}/assets/application.js`;
const themeAdminEntry = `${themeFullPath}/assets/application-admin.js`;
const themeGutenbergEntry = `${themeFullPath}/assets/application-gutenberg.js`;
const themeCustomizerEntry = `${themeFullPath}/assets/customizer.js`;
const themeOutput = `${themeFullPath}/public`;

// Outputs
const outputJs = 'scripts/[name].js';
const outputCss = 'styles/[name].css';
const outputFile = '[name].[ext]';
const outputImages = `images/${outputFile}`;
const outputFonts = `fonts/${outputFile}`;

const allModules = {
  rules: [
    {
      test: /\.(js|jsx)$/,
      use: 'babel-loader',
      exclude: /node_modules/,
    },
    {
      test: /\.json$/,
      exclude: /node_modules/,
      use: 'file-loader',
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
      exclude: [/fonts/, /node_modules/],
      use: `file-loader?name=${outputImages}`,
    },
    {
      test: /\.(eot|otf|ttf|woff|woff2|svg)$/,
      exclude: [/images/, /node_modules/],
      use: `file-loader?name=${outputFonts}`,
    },
    {
      test: /\.scss$/,
      exclude: /node_modules/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader', 'postcss-loader', 'sass-loader',
      ],
    },
  ],
};

const allPlugins = [
  new MiniCssExtractPlugin({
    filename: outputCss,
  }),

  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
  }),

  // Use BrowserSync For assets
  new BrowserSyncPlugin({
    host: 'localhost',
    port: 3000,
    proxy: proxyUrl,
    files: [
      {
        match: ['wp-content/themes/**/*.php', 'wp-content/plugins/**/*.php'],
      },
    ],
  }),

  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
    },
  }),

  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
];

const allOptimizations = {
  runtimeChunk: false,
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
};

// Use only for production build
if (!DEV) {
  allOptimizations.minimizer = [
    new UglifyJsPlugin({
      cache: true,
      parallel: true,
      sourceMap: true,
      uglifyOptions: {
        output: {
          comments: false,
        },
        compress: {
          warnings: false,
          drop_console: true, // eslint-disable-line camelcase
        },
      },
    }),
  ];
  allPlugins.push(new CleanWebpackPlugin([themeOutput]));
}

module.exports = [

  // Theme Skin
  {
    context: path.join(__dirname),
    entry: {
      application: [themeEntry],
      applicationAdmin: [themeAdminEntry],
      themeGutenberg: [themeGutenbergEntry],
      customizer: [themeCustomizerEntry],
    },
    output: {
      path: themeOutput,
      publicPath: themePublicPath,
      filename: outputJs,
      library: ['wp', '[name]'],
      libraryTarget: 'var',
    },

    externals: {
      wp: 'wp',
    },

    optimization: allOptimizations,

    mode: 'production',

    module: allModules,

    plugins: allPlugins,

    devtool: DEV ? '#inline-source-map' : '',
  },
];

和package.json是

{
  "name": "mytheme",
  "version": "1.0.0",
  "author": "dingo_d",
  "private": true,
  "main": "",
  "scripts": {
    "__sassUnusedTheme": "sass-unused \"wp-content/themes/init_theme_name/**/*.scss\"",
    "__eslintTheme": "eslint wp-content/themes/init_theme_name/skin/assets/",
    "__stylelintTheme": "stylelint \"wp-content/themes/init_theme_name/**/*.scss\" --syntax scss",
    "precommitCss": "npm run __stylelintTheme",
    "precommitCssUnused": "npm run __sassUnusedTheme",
    "precommitJs": "npm run __eslintTheme",
    "precommit": "npm run precommitJs && npm run precommitCss && npm run precommitCssUnused",
    "start": "webpack --progress --watch --display-error-details --display-reasons",
    "build": "NODE_ENV=production webpack --progress"
  },
  "devDependencies": {
    "@infinumjs/eslint-config": "^1.1.0",
    "@infinumjs/stylelint-config": "^1.0.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.6.1",
    "browser-sync": "^2.24.1",
    "browser-sync-webpack-plugin": "^2.2.2",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-plugin-import": "^2.11.0",
    "expose-loader": "^0.7.5",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "imports-loader": "^0.8.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^2.1.4",
    "precss": "^3.1.2",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "stylelint": "^9.2.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2"
  },
  "dependencies": {
    "autoprefixer": "^8.4.1",
    "babel-polyfill": "^6.26.0",
    "bugsnag-js": "^4.6.0",
    "css-mqpacker": "^6.0.2",
    "cssnano": "^3.10.0",
    "jquery": "^3.3.1",
    "jquery-match-height": "^0.7.2",
    "layzr.js": "^2.2.2",
    "media-blender": "^2.1.0",
    "normalize.css": "^8.0.0",
    "npm": "^6.0.0",
    "postcss-font-magician": "^2.1.1",
    "slick-carousel": "^1.8.1",
    "whatwg-fetch": "^2.0.4"
  },
  "browserslist": [
    "android >= 4.2",
    "not ie < 11",
    "last 2 versions",
    "Safari >= 8"
  ]
}

困扰我的是，我基本上使用(并修改)了我的代码，该代码在没有所有花哨的构建工具(https://themes.svn.wordpress.org/expire/1.0.9/inc/customizer/js/customizer.js)的情况下构建的主题中工作

我试过

/* global wp */
(function(api) {
  api('footer_copyright', (value) => {
    value.bind((newval) => {
      if ($('.footer__copyright').length) {
        if (newval !== '') {
          if ($('.footer__copyright').hasClass('hide')) {
            $('.footer__copyright').removeClass('hide').text(newval);
          } else {
            $('.footer__copyright').text(newval);
          }
        } else {
          $('.footer__copyright').addClass('hide');
        }
      } else {
        $('.footer__container').append(`<div class="footer__copyright">${newval}</div>`);
      }
    });
  });
})(wp.customize);

不过，我又得到了

Uncaught ReferenceError: wp is not defined

在检查器中，可能在加载所有内容后，wp.customize 可用(ƒ (){return f.instance.apply(f,arguments)} ).

我遵循了 Gutenberg 给出的建议团队，他们正在使用 webpack，但我不确定我做得对不对。

Answer 1

不确定这是否是最佳解决方案，但我决定在我的 wp_enqueue_script 调用中添加依赖项。例如我最初有:

wp_enqueue_script('scripts/admin/remove_category.js', asset_path('scripts/admin/remove_category.js'));

但后来我搜索了 WordPress JS 文件以查看哪些使用了 wp，我想我可以选择其中的任意一个作为依赖项并随后确保 wp 在我的脚本中可用，如下所示:

wp_enqueue_script('scripts/admin/remove_category.js', asset_path('scripts/admin/remove_category.js'), ['wp-util']);