我正在使用Laravel开发一个项目,它默认使用webpack来捆绑其资产。在其中,我有一个依赖于一个包的依赖项,该包反过来又依赖于lodash和deepdash。
由于deepdash作为lodash的mixin提供,因此根据文档,使用它的方式如下:
由于deepdash作为lodash的mixin提供,因此根据文档,使用它的方式如下:
// load Lodash if you need it
const _ = require('lodash');
//mixin all the methods into Lodash object
require('deepdash')(_);
或者,如果你想使用ES6语法(至少这是我的理解),它将被翻译成:
import _ from 'lodash';
import deepdash from 'deepdash';
deepdash(_);
我已经这样做了,现在正在尝试使用webpack创建一个捆绑包以在浏览器中使用。我的问题是,由于某种原因,webpack似乎用一些“__webpack_require__”的魔法功能替换了lodash的导入,导致lodash不再是一个函数,浏览器会显示以下错误信息:
![enter image description here](https://istack.dev59.com/ca8fR.webp)
为了更好地展示我的问题,我创建了一个演示github repo,只尝试webpack deepdash和lodash: ArSn/webpack-deepdash 这是浏览器抱怨的行:https://github.com/ArSn/webpack-deepdash/blob/master/dist/main.js#L17219
我尝试了很多关于添加Babel配置的方法,最好的方案似乎是使用插件babel-plugin-transform-commonjs-es2015-modules。我试过了,结果仍然完全一样。
我感觉自己要么对情况有深刻的误解,要么只是缺少一个微小的东西。但是,我无论如何都想不出哪一个是什么以及是什么。
附注:
- 我知道deepdash也有一个ES6版本,显然当同时使用这两个版本时,webpack机制可以正常工作(在deepdash的github问题回应中已经说明了这一点),但我使用的依赖项没有使用那些版本。此外,我真的看不出来(或者说理解?)为什么首先要有一个专门的ES6版本。
- 完全相同的代码(使用lodash的这种方式)在node.js上执行时可以正常工作,在那里它在被webpack打包之前并没有被打包。我应该提到这里使用了require语法。
import * as deepdash from 'deepdash';
但我见过一些打包工具将全局对象转换为对象,即使module.exports
是一个函数。 - Patrick Roberts(...)
现在不显示 - ArSeN