带有 WordPress 和 Webpack 的 jQuery答案

【问题标题】：jQuery with WordPress and Webpack带有 WordPress 和 Webpack 的 jQuery
【发布时间】：2019-01-02 19:16:06
【问题描述】：

我刚刚在 WordPress 主题中设置了 Webpack。

主题使用 Bootstrap，在这方面，bootstrap.min.js 之前已像这样加载：

wp_enqueue_script( 'bootstrapjs', get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js', array( 'jquery' ) );

WordPress 内置了 jQuery，因此通过将 jquery 指定为依赖项，这可以正常工作并且每个人都很高兴。

但是，现在我正在尝试使用 Webpack。我仍然习惯它，我的印象是，将尽可能多的脚本编译成一个是一种很好的风格，以限制服务器必须发出的请求以获取所有资源。

所以我被撕裂了...是吗

解决方案 1) 不使用 Webpack 编译 Bootstrap.min.js。
...然后将该文件直接放在资产文件夹中并将其排入队列（完全绕过 Webpack）。
优势：我可以只使用 WordPress 的 jQuery，这样就不需要加载两次（这也可能导致问题）。
缺点：文件结构混乱，因为有些文件是通过 Webpack 加载的，有些则不是。这也将导致更多的文件（更多的服务器请求）。

解决方案 2) 使用 Webpack 编译 Bootstrap.min.js。这需要我导入jquery 和popper，所以我可以要求Bootstrap.min.js 文件而不会出错。
优点：更好的文件结构和更少的服务器需要请求的文件。
缺点： Jquery 需要加载两次（这可能是一团糟）。这也可能导致更大的文件大小。

【问题讨论】：

标签： jquery wordpress webpack

【解决方案1】：

另一个少数解决方案是使用@wordpress/dependency-extraction-webpack-plugin。您可以将它作为 webpack 插件加载，它会自动检测 Wordpress 安装中无法包含的多个依赖项（jQuery、React 等）。

const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin')
// ...
plugins: [
   new DependencyExtractionWebpackPlugin()
]

另一个好处是它将输出一个包含脚本文件的依赖项和校验和的 php 数组。您可以稍后使用它来提供 wp_enqueue_script 函数。

$script_path = plugin_dir_path(__FILE__ ) . 'dist/main.js';
$script_asset_path = plugin_dir_path(__FILE__ ) . 'dist/main.asset.php';
$script_asset = file_exists( $script_asset_path )
      ? require( $script_asset_path )
      : array( 'dependencies' => array(), 'version' => filemtime( $script_path ) );
  $script_url = plugin_dir_url(__FILE__ ) . 'dist/main.js';
  wp_enqueue_script( 'app', $script_url, $script_asset['dependencies'], $script_asset['version'], false );

我发现这是在 Wordpress 前端包含 React 组件的最佳方式，当然也适用于 jQuery。

【讨论】：

【解决方案2】：

我遇到了同样的问题。使用wp_deregister_script 对我不起作用。我可以在 webpack 中使用这个设置来修复它

  externals: {
    jquery: 'jQuery',
  },

更多信息在这里：https://webpack.js.org/configuration/externals/

【讨论】：

【解决方案3】：

我刚刚意识到我可以使用以下方法取消注册 jQuery：

function custom_head_cleanup(){
  if( ! is_admin() ){
    wp_deregister_script( 'jquery' ); 
  }
}
add_action( 'init', 'custom_head_cleanup' );

我假设我随后使用解决方案 2。

【讨论】：

hmm 所以你在你的包 json 中包含 jquery 然后导入'jquery'？如何让 jquery 在我的包 json 和 webpack 中的 jquery 保持相同的版本？

【解决方案4】：

只是在同样的问题上苦苦挣扎。首先使用您的解决方案 2。不幸的是，一些依赖于 jquery 的插件坏了。所以对我来说，以下工作。

通过 webpack.config 中的外部组件从捆绑文件中排除 jQuery 模块.exports = {

  externals: {
    jquery: 'jQuery'
  }
};

plugins: [

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

通过在functions.php中注销和注册jQuery来使用更新的jQuery版本

【讨论】：