通过 webpack.ProvidePlugin 全局为 lodash 提供 mixins答案

【问题标题】：Provide lodash with mixins globally via webpack.ProvidePlugin通过 webpack.ProvidePlugin 全局为 lodash 提供 mixins
【发布时间】：2015-07-22 06:12:00
【问题描述】：

我想通过 webpack.ProvidePlugin 提供一些 lodash mixin，例如：

import * as _ from 'lodash';
export {_};
_.mixin({
  capitalize: function (input: string) {
  bla...
  }
})

我正在使用带有 Webpack 的 Typescript。

在 webpack.config.js 我有：

lodashPlugin = new webpack.ProvidePlugin({
  _: 'common/lodash_mixins'
})

当我尝试使用_.capitalize(string) 时，我得到了

TypeError: _.capitalize is not a function

当我记录“_”时，我发现大写实际上是该对象上的一个函数。

我在这里错过了什么？

【问题讨论】：

标签： typescript lodash webpack

【解决方案1】：

您正在将_ 导出为命名导出，这需要import { _ } from 'common/lodash_mixins';，但ProvidePlugin 希望您导出单个对象。您应该改用默认导出。

export default _;

见default export。

【讨论】：

【解决方案2】：

TypeError: .capitalize 不是函数当我记录“”时，我看到大写实际上是该对象上的一个函数。

log _.capitalize 你会发现它是未定义的。如果您只记录_，您将有机会看到一个变异版本（开发工具将允许延迟评估）。 => 如果这是正确的，那么它会让我相信您的代码中某处存在排序问题。

【讨论】：

【解决方案3】：

我发现对我有用的解决方案是：

import * as lodashExtended from 'lodash';
module.exports = lodashExtended;
lodashExtended.mixin({
  capitalize: function (input: string) {
  bla...
  }
})

我更喜欢使用 es6 语法但尚未找到的解决方案。

感谢@basarat 帮助调试此问题。

【讨论】：