如何将 npm 包导入客户端文件答案

【问题标题】：How to import npm package to a client file如何将 npm 包导入客户端文件
【发布时间】：2021-01-05 22:47:01
【问题描述】：

我正在尝试将js-search npm package 导入我的客户.js 文件。他们的文档说写import * as JsSearch from 'js-search';，但是，这给了我Uncaught TypeError: Failed to resolve module specifier "js-search". Relative references must start with either "/", "./", or "../".。试了很久配置相对路径，终于发现'js-search'指的是包名，不是目录。那么，我必须缺少一些允许我使用此导入行的依赖项吗？谢谢。

编辑：目录结构：

myproject
├── myproject
├── node_modules\js-search
└── myapp
    ├── static\myapp
    │            └── myapp.js
    └── templates\search
                    └── index.html

编辑：可能是因为我在 localhost 而不是服务器上运行？

【问题讨论】：

你在客户端目录中 npm i js-search 了吗？我的意思是你可能有backend 和frontend (or client) 目录，所以如果它们是从该目录中的.js 文件中导入的，请确保你在客户端目录中 npm 安装包
这个包是否安装在你的节点模块目录中。如果不确定，请运行npm install --save js-search，然后尝试它应该可以工作
@lbragile 这是一个 Django 应用程序，我已将其安装在 node_modules 目录中，我尝试将此目录放在项目根目录以及 static/myapp 中。
@AayushMall 这是一个 Django 应用程序，我已将其安装在 node_modules 目录中，我尝试将此目录放在项目根目录以及 static/myapp 中。
@RyanEom，我不熟悉 Django 的文件夹结构，所以如果你想让我帮忙，你需要指出你的文件夹结构。

标签： javascript npm npm-package

【解决方案1】：

您必须使用type="module" 链接您的myapp.js 文件，如下所示

<script type="module" src="myapp.js"></script>

然后在myapp.js 中，您必须使用来自node_modules 的相对路径导入js-search，因为您没有使用任何像webpack 这样的捆绑程序。在您的myapp.js 文件中，您可以使用js-search，如下所示

import * as JsSearch from './node_modules/js-search/dist/esm/js-search.js';

var theGreatGatsby = {
  isbn: '9781597226769',
  title: 'The Great Gatsby',
  author: {
    name: 'F. Scott Fitzgerald'
  },
  tags: ['book', 'inspirational']
};
var theDaVinciCode = {
  isbn: '0307474275',
  title: 'The DaVinci Code',
  author: {
    name: 'Dan Brown'
  },
  tags: ['book', 'mystery']
};
var angelsAndDemons = {
  isbn: '074349346X',
  title: 'Angels & Demons',
  author: {
    name: 'Dan Brown',
  },
  tags: ['book', 'mystery']
};

var search = new JsSearch.Search('isbn');
search.addIndex('title');
search.addIndex(['author', 'name']);
search.addIndex('tags')

search.addDocuments([theGreatGatsby, theDaVinciCode, angelsAndDemons]);

console.log(search.search('The'));    // [theGreatGatsby, theDaVinciCode]
console.log(search.search('scott'));  // [theGreatGatsby]
console.log(search.search('dan'));    // [angelsAndDemons, theDaVinciCode]
console.log(search.search('mystery')); // [angelsAndDemons, theDaVinciCode]

【讨论】：

【解决方案2】：

您使用的 NPM 包很可能是为 node.js 代码制作的包。 import * as JsSearch from 'js-search'; 行适用于 node.js，在浏览器中无法单独运行。

要在浏览器中运行这些类型的包，您基本上需要使用转译器对其进行转换。最常见的可能是 webpack。

有时，软件包还会在其软件包中包含专门针对浏览器的预构建或缩小版本。如果是这种情况，您可能会在js-search 目录中找到类似something.min.js 的文件。

js-search 看起来可能有这个，因为我在他们的存储库中看到了一个汇总配置文件。 Rollup 是 webpack 的替代品。

如果不是这种情况，那么很遗憾，您必须进入构建工具这个非常疯狂的兔子洞。

【讨论】：

是的！ js-search 在js-search/dist/umd 下有一个js-search.min.js 文件。那么我是否只需将此文件复制并粘贴到我的 static/myapp 文件夹，然后从中导入？
看看你能不能完成这项工作。我不知道umd 模块是否与 ecmascript 导入兼容。如果没有，您可能需要通过常规的<script> 标签获取它。
我认为导入在技术上有效，但是当我尝试使用文档中指示的库时，我得到Uncaught (in promise) TypeError: JsSearch.Search is not a constructor.