我知道这是一个非常简单的问题,但我还没有看到任何类似的简单问题/答案。我正在尝试确定 jQuery 是否值得保留在我的 React 应用程序中,并且我几乎完全将它用于 ajax。webpack 是否足够智能,只在包中包含 jQuery 的 ajax 部分?
Webpack 是否足够智能,可以让 jQuery 更轻量?
不,即使您使用的是 Webpack 2(webpack 1 和之前的版本没有实现摇树;也就是说,整个module都将包含在您的包中,而不仅仅是包中)那些你导入的)这是因为 jquery 在 NPM 中是如何出售的:作为一个大型 jquery.js module。
如果您打算使用 jquery,有一些方法可以仅使用 ajax module来构建 jquery,但这需要一些手动操作(例如,您不能只是这样做import {ajax} from 'jquery'
)。有一个 lodash 的 babel 插件,它在自己的module中提供每个方法,所以你不必在你的 webpack 构建中包含所有的 lodash。它是一个 babel 插件,因为它依赖于import { some_method } from 'library'
语法。
如果您正在寻找一个简单的 ajax 库,我强烈建议您使用isomorphic-fetch(在浏览器中,它只使用 'whatwg-fetch')。它使您的代码非常整洁。
您可以按照此处官方 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. 删除不需要的module
删除或注释一些module:确保测试您的代码是否继续工作而不会引发错误。
5. 在 Webpack 配置中添加自定义 jQuery 作为别名
这将告诉 Webpackjquery
在您的代码或依赖项之一需要时使用您的版本。例如:
module.exports = {
resolve: {
alias: {
jquery: `${environment.paths.source}/js/jquery-custom/jquery-custom.js`,
}
}
};
最后一句话
我已经看到,如果我删除很多module,大小会减小,但如果不这样做,它甚至会略微增加:因此,如果您需要逐步删除一些代码或者您已经使用了很少的module,这是一个很好的策略,否则你最好坚持原来的或寻找替代库。