jquery如何与ES6结合?

描述你的问题

之前项目中的js代码都是直接使用jquery，以 $(document).ready(function(){xxxxx}) 的形式写在html中。这样的代码看起来很low不说，还很难以维护。为了实现js和html的分离，我将$(document).ready(function(){xxxxx}) 这样的代码转移到了js文件中。

在后来, 项目中引入了es6, 非页面相关的js(不操作dom或者不监听DOM事件的js)都直接以es6 modules的形式组织起来了。可是 $(document).ready(function(){xxxxx}) 这样的代码如何封装成 es6 module 供其它js文件来import呢？

我目前的解决方法

我目前是将页面相关的js(也就是操作dom或者监听DOM事件的js)按照功能来分模块， 比如用户管理模块就叫user.js， 其中包含 后台中用户管理(用户列表，添加/编辑用户资料)的相关页面，以及前台个人资料(如编辑个人信息 等)相关页面的js。伪代码如下:

// user.js
$(document).ready(function(){
    $('.front .profile .btn-edit').click(function(){
        // 点击个人资料页面中编辑按钮的响应方法
        ...
    });
    
    ...
    
    $('.backend .user-list .btn-del').click(function(){
        // 点击管理后台中用户列表页面的删除用户按钮的响应方法
        ...
    });
    
    ...
});

这样，如果当前页面是个人资料修改页面，那 肯定不存在 .backend .user-list .btn-del 这个元素， $('.backend .user-list .btn-del').click() 自然也就无效。同理，如果在后台用户管理的用户列表页面， $('.front .profile .btn-edit').click() 也就无效，如此页面相关的js肯定不会冲突。

但是这样的问题是，web项目中大部分的js代码都是页面相关的js(操作dom或者需要相应dom事件的js)。这样user.js这个文件就很大, 我想将其拆分成多个js文件，然后通过 import 的方式引用到入口文件中，再通过webpack打包。可是，$(document).ready(function(){xxxxx}) 这样的代码如何写才可以让其它js文件导入呢？