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

Question

我正在开发一个 laravel 的项目，该项目使用（因为它是默认设置）webpack 来捆绑其资产。在那里，我确实依赖于一个包，而这个包又依赖于 lodash 和 deepdash。

由于 deepdash 是作为 lodash 的混合提供的，因此它的用法（根据文档）如下所示：

// 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 存储库，只是尝试对 deepdash 和 lodash 进行 webpack：ArSn/webpack-deepdash Here is the line that the browser complains about: https://github.com/ArSn/webpack-deepdash/blob/master/dist/main.js#L17219

我已经尝试过大量添加 babel 配置，感觉我最好的选择是插件 babel-plugin-transform-commonjs-es2015-modules。我试过了，结果还是一样。

我觉得要么我对情况有很深的误解，要么我只是漏掉了一件小事。然而，我一辈子都不知道它是哪一个，是什么。

旁注：

我知道还有一个 ES6 版本的 deepdash，显然当同时使用这两个版本时，webpack 机制工作正常（正如在 deepdash 上对 github issue I opened 的回应中所述），但是我使用的依赖项没有使用那些。另外，我真的不明白（或理解？）首先在那里拥有专用 ES6 版本的意义。
完全相同的代码（以这种方式将 deepdash 与 lodash 一起使用）在 node.js 上执行时工作正常，之前它没有与 webpack 捆绑在一起，很明显。我应该提到它在这里使用了 require-syntax。

Answer 1

当运行来自 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 和静态导入 - 因为实际上什么都没有 "exported"。

另外：通常这些条目不指向缩小版本。这些通常仅适用于 CDN 用例，不适用于捆绑器。

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

deepdash-es 构建基本上做同样的事情，除了它使用 es6 导出。也许这就是 treeshaking 开箱即用的方式。不确定...

为了规避 "browser" 问题 - deepdash 的作者可以简单地修改它以使用 "deepdash.js" 或删除它：

If your module is pure javascript and can run in both client and server environments, then you do not need a browser field.

How to use webpack and ES6 with dependencies using a CommonJS module?