如何从jQuery导入特定模块？Webpack/Browserify导入失败解决方法

嘿，我明白你遇到的问题了——直接用import {core, dimensions} from 'jquery'确实行不通，这是因为jQuery默认是以UMD格式打包的，它导出的是一个单一的全局对象，而不是拆分好的ES模块成员。下面我会详细讲清楚在Webpack和Browserify中按需导入jQuery特定模块的具体步骤：

为什么直接解构导入无效？ #

当你从'jquery'包导入时，实际上拿到的是已经合并完成的jQuery主文件（比如node_modules/jquery/dist/jquery.js），这个文件里的$是一个完整的对象，并没有把core、dimensions作为独立的导出属性暴露出来，所以解构赋值自然拿不到想要的内容。要按需导入，我们需要直接从jQuery的源码模块中引入。

Webpack环境下的具体流程 #

1. 安装jQuery #

首先确保你已经安装了jQuery：

npm install jquery --save

2. 直接导入源码模块 #

jQuery的源码在node_modules/jquery/src/目录下是按模块拆分的，我们可以直接引入需要的部分：

// 先导入核心模块，这是jQuery的基础
import $ from 'jquery/src/core';

// 再导入dimensions模块，它会自动挂载到$对象上
import 'jquery/src/dimensions';

这样你就能得到一个包含核心功能+尺寸方法的$对象，比如可以使用$(element).width()、$(element).height()这些dimensions提供的方法，同时只打包了需要的代码。

3. 可选：优化Webpack配置 #

如果觉得每次写完整路径麻烦，可以在webpack.config.js中配置resolve.alias来简化导入：

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      'jquery-core': 'jquery/src/core',
      'jquery-dimensions': 'jquery/src/dimensions'
    }
  }
};

之后就可以这样写：

import $ from 'jquery-core';
import 'jquery-dimensions';

Browserify环境下的具体流程 #

1. 安装依赖 #

除了jQuery，还需要安装Browserify和Babel相关工具来处理ES6导入：

npm install jquery browserify babelify @babel/core @babel/preset-env --save-dev

2. 配置Babel #

在项目根目录创建.babelrc文件，配置ES6转译规则：

{
  "presets": ["@babel/preset-env"]
}

3. 按需导入模块 #

和Webpack一样，直接从源码目录导入：

import $ from 'jquery/src/core';
import 'jquery/src/dimensions';

4. 打包代码 #

使用Browserify+Babelify打包你的入口文件：

browserify your-entry-file.js -t babelify -o bundled-file.js

注意事项 #

• 某些jQuery模块可能依赖其他子模块（比如dimensions依赖src/css.js），但Webpack和Browserify会自动解析这些依赖并打包，不需要你手动引入。
• 不要使用node_modules/jquery/dist/下的打包好的文件，这些是完整版本，无法拆分导入。必须从src/目录导入源码模块。
• 如果需要更多模块（比如ajax、effects），可以用同样的方式导入对应的源码文件，比如import 'jquery/src/ajax'。

内容的提问来源于stack exchange，提问作者Filip Petrovic