如何在 HTML 中使用来自 lodash/fp 的管道？

Posted 2023-03-15

【中文标题】如何在 HTML 中使用来自 lodash/fp 的管道？

【英文标题】：How to use pipe from lodash/fp in HTML?

【发布时间】：2022-01-17 02:22:22

【问题描述】：

我从 lodash 官方文档下载了 lodash.js，但是 _.pipe() 在我的控制台中抛出了一个错误。如何解决这个问题

let input = "    javascript     ";

const trim = (str) => str.trim();
const toLowerCase = (str) => str.toLowerCase();
const wrapInDiv = (str) => `<div>$str</div>`;

const transform = _.pipe(trim, toLowerCase, wrapInDiv);

console.log(transform(input));

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

【问题讨论】：

"an error" — 错误信息是秘密吗？

我已将您的代码转换为现场演示。它说pipe 不是函数。我查看了the docs，但在其中看不到pipe 函数。为什么你认为它应该是一个函数？

管道存在于 lodash/fp

【参考方案1】：

使用 CDN

当我在 html 中包含 lodash.js 时，我看不到 /fp 目录。

但是添加 CDN 解决了​​这个问题。

您有两种选择。

1.按照官方文档，在其中选择你需要的函数（在本例中为管道）和 lodash.min.js 并将此脚本标记添加到现有脚本标记之上。

<script src="https://cdn.jsdelivr.net/combine/npm/lodash@4/fp/pipe.min.js,npm/lodash@4"></script>

2.Else 添加完整的lodash/fp模块和lodash

<script     
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
      integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"></script>
 <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.fp.min.js"
      integrity="sha512-PQPary7Ah0W8wFgizjGNg0jWpVUKLAxUCvdTNS4lpQFUtoeg5cmSaI8cJK3zh5TDgHDMMHo3tG3ZcLideDlRuQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

Lodash CDN Reference