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

Question

我正在使用 laravel 开发一个项目，该项目使用(因为它是默认设置)webpack 来捆绑其 Assets 。在那里，我确实依赖于一个包，而这个包又依赖于 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这是浏览器提示的行: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 版本的意义。
• 在 node.js 上执行时，完全相同的代码(以这种方式使用 deepdash 和 lodash)工作得很好，之前它没有与 webpack 捆绑在一起，很明显。我应该提到它在这里使用了 require-syntax。

Answer 1

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

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

deepdash(_);

Webpack uses 浏览器默认入口:

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

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

此外:通常这些条目不指向缩小的构建。这些通常仅适用于 CDN 用例，不适用于 bundler 。

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

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

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

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

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