代码之家 › 专栏 › 技术社区 › Zeth

带WordPress和Webpack的jQuery

webpack wordpress jquery

Zeth · 技术社区 · 7 年前

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

主题使用引导程序,在这方面, 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 .
…只需将该文件直接放入assets文件夹并将其排队(完全绕过Webpack)。
上攻: 我可以使用WordPress的jQuery,这样就不需要加载两次(这也可能导致问题)。
下降趋势: 文件结构混乱,因为有些文件是通过Webpack加载的,有些则不是。这也会导致更多的文件(更多的服务器请求)。

解决方案2)使用Webpack编译bootstrap.min.js . 这需要我导入 JQuery 和 popper ,这样我就可以要求bootstrap.min.js-file而不会出错。
上攻: 更好的文件结构和更少的服务器需要请求的文件。
下降趋势: jquery需要加载两次(可能会很混乱)。这也会导致更大的文件大小。

1 回复 | 直到 7 年前

Zeth 7 年前

我刚刚意识到我可以使用以下方法注销jquery:

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

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

推荐文章

Marcin Budzy · Twenty 24 Wordpess主题的子菜单隐藏在图库下方(响应式灯箱和图库)(Wordpress)

1 年前

Cairan Van Rooyen · 为什么我的Grafana iframe不会显示在我的Wordpress网站上?

1 年前

Eiman Maghfouri · woocommerce _可购买的编辑挂钩

1 年前

OÄuz Erdem · chrome浏览器和iOS safari浏览器的页脚行为不同

1 年前

JapeNZ · 通过自定义cron作业函数向WooCommerce产品添加产品标签

1 年前

Mohammed Malleck · 在WooCommerce管理员编辑订单页面中隐藏客户IP地址

1 年前

Javad Hamashbouri · 不显示ajax警报

1 年前

Eduardo Relax · 如何获取WooCommerce产品类别url以在HTML元标记中显示?

1 年前

Stamp · 自定义字段未显示在WordPress REST API响应中

1 年前

pawan19 · WordPress的Nginx设置:面临301重定向问题

1 年前