javascript - 如何使用CommonJS模块将webpack和ES6与依赖项一起使用？

我正在使用laravel开发一个项目，该项目使用(因为这是默认设置)Webpack捆绑其 Assets 。在那里，我确实依赖于一个包，而该包又具有对lodash和deepdash的依赖。

由于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不再是一个函数，浏览器说:


为了更好地演示我的问题，我创建了一个演示github repo 示例，仅尝试对Deepdash和lodash进行webpack:ArSn/webpack-deepdash这是浏览器提示的行:https://github.com/ArSn/webpack-deepdash/blob/master/dist/main.js#L17219

我在增加babel配置方面做了大量工作，觉得我最好的选择是插件babel-plugin-transform-commonjs-es2015-modules。我尝试过，结果仍然完全相同。

我觉得要么我对情况有很深的误解，要么我只想念一件小小的事情。但是，对于我的一生，我无法弄清楚它是什么，什么。

旁注:

我知道也有一个Deepdash的ES6-Version，并且显然当同时使用这两种Webpack机制时(如在Deepdash中对github issue I opened的响应中所述)，但是我使用的依赖项不是使用那些。另外，我真的不明白(或理解？)首先要在那里使用专用ES6版本的意义。

当在node.js上执行时，完全相同的代码(以这种方式将deepdash与lodash结合使用)可以很好地工作，以前它并没有与webpack捆绑在一起。我应该提一下，尽管它在这里使用了require语法。

最佳答案

在运行deepdash网站上的示例之一时，明确指向deepdash主模块对我有用:

import _ from 'lodash';
import deepdash from 'deepdash/deepdash';

deepdash(_);

Webpack uses缺省为browser条目:

  "main": "deepdash.js",
  "module": "es/standalone.js",
  "browser": "browser/deepdash.min.js",

对于Webpack和静态导入，这将不起作用-因为没有真正“导出”的东西。

另外:通常，这些条目并不指向精简版。这些通常仅适用于CDN用例，不适用于捆绑软件。

相反，'deepdash/deepdash.js'导出装饰器函数。

除了使用es6导出外，deepdash-es构建基本上执行相同的操作。也许这是开箱即用的方式。对此不确定...

为了规避“浏览器”问题-deepdash的作者可以简单地将其修改为使用“deepdash.js”或将其删除:

https://github.com/defunctzombie/package-browser-field-spec