Question

我知道这是一个非常简单的问题，但我还没有看到任何类似的直截了当的问题/答案。我试图决定jQuery是否值得保留在我的反应应用程序中，而我几乎完全用于ajax。 webpack足够聪明，只能在包中包含jQuery的ajax部分吗？

Answer 1

不，webpack不仅会在你的包中包含jquery的ajax部分，即使你使用的是Webpack 2（webpack 1和之前的版本没有实现树状结构;也就是说，整个模块将包含在你的包中，而不仅仅是你导入的那些）这是因为在NPM中如何销售jquery：作为一个大型jquery.js模块。

如果你打算使用jquery，有一些方法只使用ajax模块来构建jquery，但这需要一些手动工作（例如，你不能只做import {ajax} from 'jquery'）。有一个用于lodash的babel插件，它可以在自己的模块中销售每个方法，因此您不必在webpack构建中包含所有lodash。它是一个babel插件，因为它依赖于import { some_method } from 'library'语法。

如果您正在寻找一个简单的ajax库，我强烈建议您使用isomorphic-fetch（在浏览器中，只使用＆＃39; whatwg-fetch＆＃39;）。它使您的代码非常整洁。

Answer 2

您可以按照此处的官方 jQuery 存储库中的文档创建自己的版本：https://github.com/jquery/jquery#how-to-build-your-own-jquery，但我不得不说，我无法根据我的设置调整这些步骤，而且还涉及使用Grunt 不是我们工具带的一部分。

但是我发现了一个非常好的 Github Gist 解释了如何只使用 Webpack：https://gist.github.com/rhaglennydd/abb2d27144e1a595e7c850b0a7611a21。

我认为链接只回答违反了 SO 中的一些规则，所以我给出了一个简短的描述。

1.通过 npm 安装 jQuery

npm install jquery

2.复制导出的代码

将代码从 node_modules/jquery/src/jquery.js 复制到项目中的文件（例如 code/resources/js/jquery）

3.编辑源文件路径

导入的文件必须是 node_modules 文件夹中的原始文件。例如，'./core', 可以变成 '../../../node_modules/jquery/src/core'。

4.删除不需要的模块

删除或注释一些模块：确保测试您的代码是否继续工作而不会引发错误。

5.在 Webpack 配置中添加自定义 jQuery 作为别名

这将告诉 Webpack 在您的代码或依赖项之一中需要 jquery 时使用您的版本。例如：

module.exports = {
  resolve: {
    alias: {
      jquery: `${environment.paths.source}/js/jquery-custom/jquery-custom.js`,
    }
  }
};

最后一句话

我已经看到，如果我删除很多模块，大小会减小，但如果不这样做，它甚至会略微增加：因此，如果您需要逐步删除一些代码或者如果您已经在使用，这是一个很好的策略模块很少，否则你最好坚持原来的或寻找替代库。

Webpack足够聪明，让jQuery更轻松吗？

2 个答案: