jQuery与WordPress和Webpack

我刚刚在WordPress主题中设置了网页包

主题使用Bootstrap，在这方面，

Bootstrap.min.js

以前是这样加载的：

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

WordPress将jQuery烘焙到其中，因此通过将

jQuery

指定为依赖项，它可以工作，每个人都很高兴

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

所以我很伤心。。。是吗

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

解决方案2）使用Web包编译Bootstrap.min.js。这需要我导入

jquery

和

popper

，这样我就可以要求Bootstrap.min.js-file而不会出错。
优点：更好的文件结构，服务器需要请求的文件更少。

---

缺点：Jquery需要加载两次（这可能会很混乱）。这也会导致更大的文件大小

我刚刚意识到我可以使用以下方法注销jQuery：

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

---

我假设然后使用解决方案2

只是在努力解决同样的问题。首先使用您的解决方案2。不幸的是，一些依赖jquery的插件坏了。因此，对我来说，工作如下

通过webpack.config中的externals将jQuery从捆绑包文件中排除 module.exports={

  externals: {
    jquery: 'jQuery'
  }
};

plugins: [

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

通过取消注册使用较新的jQuery版本，并在functions.php中注册jQuery

---

另一个解决方案是使用@wordpress/dependency extraction网页包插件。您可以将其作为网页包插件加载，它将自动检测wordpress安装中可能包含的几个依赖项（jQuery、React等）

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

$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。

hmm那么你在你的json包中包含jQuery，然后导入“jQuery”？我如何使我的json包中的jQuery和webpack中的jQuery保持相同的版本？

$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 );