javascript - 从 lodash 和 lodash/template 导入模板的区别？

Question

像这样从 lodash 导入"template"有什么区别:

import { template } from 'lodash';

或者像这样:

import template from 'lodash/template';

第一个替代方案工作正常，但当我在模板中使用其他 lodash 函数(如 _.isString)时，第二个替代方案会抛出 TypeError。

Uncaught TypeError: _.isString is not a function at eval (eval at (template.js:225), :10:13)

如果我在 eval 内部进行调试，_(下划线)对象如下所示:

Object {escape: function}
    escape: function escape(string)
    __proto__: Object

除了转义函数之外是空的？

我想使用 lodash/core 和cherrypick 非核心函数，例如“template”，但这很难。

环境:

• Webpack 1.13.0
• 巴别塔 6.24.1
• 主干1.3.3
• 洛达什 4.17.4

Answer 1

对于任何碰巧遇到这种情况的人，即使是在 2020 年:

Webpack、babel 等组合起来“预编译”了 lodash(以及所有其他库)。当您构建模板时，预期的对象实例和行为不可用。例如，_.forEach 可能会在内存中“优化”为 lodash_forEach__WEBPACK_IMPORTED_MODULE_0___default。因此，如果您尝试在任何未“预编译”到同一 babel 脚本管道的脚本中使用预期的 lodash 实例化“_”，它将不可用(我认为这对于 SPA 来说是有意义的)。

为了“使用”任何“优化”行为，您需要显式传入该行为。这样，当 webpack 和 babel 执行它们的操作时，正确的函数就会被投影到模板运行时中。

 var template = $('#template').html(),
        compiled = _.template(template, { 'imports': { 'each': _.forEach } });

然后在您的模板中:

<% each(items, function(item) { %><li><%- item %></li><% }); %>