- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
ProvidePlugin()
看起来是一种常用的方法。有一个gist关于它,展示了如何将 whatwg-fetch polyfill 包含到 Webpack 构建中。 StackOverflow 上的很多答案都使用它 here和here .
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
})
条目:[...]
当我在this gist中发现这种方法时,我有点惊讶但它也同样有效。
entry: [
'babel-polyfill',
'whatwg-fetch',
'jquery',
'webpack-hot-middleware/client',
path.join(process.cwd(), 'app/app.js')
],
ProvidePlugin()
。导入
这个很简单,看这个app.js例子。该文件是 React 应用程序的入口点。
/**
* app.js
*/
import 'whatwg-fetch';
import 'babel-polyfill';
import 'jquery';
观察:在所有三种方法之间,我没有注意到包大小有任何变化。
是否有一种推荐的方法来使用 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/
我正在尝试使用有 Angular NG6起动器。在其源代码中,import angular from angular几乎写入了每个js文件。所以我尝试这样: new webpack.ProvideP
我想将 jquery 全局包含到我的 React 应用程序中。我正在使用很多使用 jquery 的第三方插件。所以我尝试通过 webpack 的 ProvidePlugin 来实现 new webpa
我有一个在很多模块中使用 zepto 的项目。 如您所知,webpack.ProvidePlugin 是处理这种情况的最佳方式,有了它,我不需要在每个模块中手动导入 zepto。 zepto 不会自己
我正在尝试在我的应用程序中访问 jquery 根据 webpack 网站上的信息,您可以使用 webpack 创建全局变量 https://webpack.js.org/plugins/provide
我正在探索使用 Webpack 的想法与 Backbone.js . 我已经遵循了快速入门指南,并且对 Webpack 的工作原理有了大致了解,但我不清楚如何加载 jquery/backbone/un
我正在尝试将 jquery 与 webpack 一起使用,但即使我使用 Webpack Provider 插件,例如: new webpack.ProvidePlugin({ 'window.
我是 Webpack 的新手,但无法弄清楚为什么我的 ProvidePlugin 调用没有按预期工作。 我有以下文件: 应用程序.js var App = function() { getSo
我有一个正在开发的小型试用 Web 应用程序,它使用 vue webpack 模板 ( https://github.com/vuejs-templates/webpack )。我是 webpack
我想使用 Webpack 的 ProvidePlugin用函数替换自由变量。在 worker 中,我想用不同的实现替换它。 webpack 的 worker-loader 都没有也不是 GoogleC
我目前正在尝试使用 webpack.ProvidePlugin,但似乎没有正确加载它。这是我的 environment.js var webpack = require("webpack"); con
我有以下内容... webpack.config.js new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', ... }),
这是我的: a.js $(() => { $.x = 42; console.log('hello from a'); }); b.js $(() => { console.log($.x
我有一个进行网络调用的功能,我希望该功能在全局范围内可用,而无需在每次需要使用该功能时都导入它 请求.js import 'whatwg-fetch'; /** * Parses the JSON
// the key same to the value, it is not worked! return an empty object {}. new webpack.ProvidePlugin
我有一个 Angular 应用程序,目前通过 Webpack 构建成一个大包,在一个文件中包含所有依赖项和应用程序代码。我试图将代码分成两个包,一个包含我的所有依赖项,另一个包含我的所有应用程序代码。
我正在使用 webpack,并按照示例分别基于 whatwg-fetch 和 es6-promise 包为旧版浏览器填充 fetch 和 Promise。 new webpack.ProvidePlu
我目前正在为我创建的每个 javascript 文件导入 jQuery 数据表。 import 'datatables.net/js/jquery.dataTables'; import 'datat
我试图在我的 webpack 应用程序的入口 index.js 文件中使用 jQuery 作为 $,但在浏览器中运行我的应用程序时收到此错误: Uncaught TypeError: Cannot r
* 注意:我对 Webpack 几乎一无所知。 我想加载 react节点模块和 Webpack 中的其他模块通过 ProvidePlugin可以在全局范围内访问它们。 我创建了一个 create-re
1。 ProvidePlugin() 看起来是一种常用的方法。有一个gist关于它,展示了如何将 whatwg-fetch polyfill 包含到 Webpack 构建中。 StackOverflo
我是一名优秀的程序员,十分优秀!