javascript - Webpack 和外部库 : ProvidePlugin vs entry vs global import?

标签 javascript reactjs ecmascript-6 webpack

1。 ProvidePlugin()

看起来是一种常用的方法。有一个gist关于它,展示了如何将 whatwg-fetch polyfill 包含到 Webpack 构建中。 StackOverflow 上的很多答案都使用它 herehere .

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/

相关文章:

javascript - 如何从完成的循环中返回数组

css - 背景隐藏行边框?

reactjs - React.Component.defaultProps 对象被覆盖,而不是合并?

javascript - ES6回调的默认值参数

javascript - es6 箭头函数在转译为 javascript 后无法识别此运算符

javascript - CSS- 扩展子元素但保持父元素的尺寸不变。创建下拉菜单

javascript - jsoup html解析style=”display :none; dont show the link

javascript - 如何从类的所有实例中删除所有数据属性

javascript - React Js 获取被点击的元素

javascript - 有没有办法使用 EXPORT * 导出 ES6 模块中的所有名称?