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

带WordPress和Webpack的jQuery

webpack wordpress jquery

Zeth · 技术社区 · 6 年前

我刚刚在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 回复 | 直到 6 年前

Zeth 6 年前

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

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

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前