1。 ProvidePlugin()
看起来是一种常用的方法。有一个gist关于它,展示了如何将 whatwg-fetch polyfill 包含到 Webpack 构建中。 StackOverflow 上的很多答案都使用它 here和here .
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
})
👍优点
- 它有效。 (如果我遗漏了什么,请更新此列表)
👎缺点
- 需要跟踪 Webpack 配置中的全局库。
2。 条目:[...]
当我在this gist中发现这种方法时,我有点惊讶但它也同样有效。
entry: [
'babel-polyfill',
'whatwg-fetch',
'jquery',
'webpack-hot-middleware/client',
path.join(process.cwd(), 'app/app.js')
],
👍优点
- 它有效。
- 我可以完全删除
ProvidePlugin()
。
👎缺点
- 需要跟踪 Webpack 配置中的全局库。
3。顶级导入
这个很简单,看这个app.js例子。该文件是 React 应用程序的入口点。
/**
* app.js
*/
import 'whatwg-fetch';
import 'babel-polyfill';
import 'jquery';
👍优点
- 它也同样有效。
- 轻松添加/删除。无需触及 Webpack 配置。
👎缺点
- 看起来这种方法单独不适用于 jQuery 插件,例如bootstrap.js。
观察:在所有三种方法之间,我没有注意到包大小有任何变化。
是否有一种推荐的方法来使用 Webpack(和 React)处理全局库?这些解决方案中的任何一个都会导致服务器端渲染出现问题吗?
谢谢!
最佳答案
我不建议将库公开为全局库,除非您确实需要它,即模块系统的要点是显式声明依赖项,例如
// app.js
import $ from 'jquery';
$.ajax(...);
如果您确实需要在全局范围内使用 jQuery,因为第三方脚本需要在您的页面上使用它,或者可能需要在控制台中进行调试,那么这里有一些有关您列出的方法的信息:
提供插件
ProvidePlugin 不会在全局上公开 jQuery,它实际上是为了修复第三方模块而设计的,这些模块错误地依赖于全局模块的存在,所以我不推荐这样做,例如
// app.js
$.ajax(...);
有效地转换为:
// app.js
require('jquery').ajax(...);
入门级和顶级导入
这些方法不适用于常规 UMD 模块(例如 jQuery),因为 jQuery 足够智能,在由 commonjs/amd/es6 感知加载器加载时不会将自己暴露在全局中。
然而,这两种方法非常适合具有副作用的模块,例如 babel-polyfill/whatwg-fetch ,因为它们不导出任何内容,它们本质上会改变全局环境。
<小时/>因此,我对 jQuery 的建议是使用 expose-loader
其设计目的是在全局范围内公开模块导出,例如
// webpack.config.js
{
module: {
loaders: [
test: require.resolve('jquery'),
loader: 'expose-loader?jQuery!expose-loader?$'
]
}
}
然后您仍然需要将其导入您的应用代码中:
// app.js
import $ from 'jquery';
$.ajax(...)
但如果绝对必要的话,它可以在全局上供页面上的其他脚本访问:
// console
window.$
window.jQuery
注意:从技术上讲,您可以在使用公开加载器时在入口点导入'jquery'
一次,然后依赖其他模块中的全局。
正如我所说,如果您不需要,那么公开模块并不明智,即使您当前碰巧在所有其他模块中使用它。
关于javascript - Webpack 和外部库 : ProvidePlugin vs entry vs global import?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39888395/