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

Question

我正在尝试将js-search npm 包导入到我的客户端.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\'指的是包名，而不是目录。那么，我一定缺少一些允许我使用此导入行的依赖项？谢谢。

\n

编辑：目录结构：

\n

myproject\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 myproject\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\\js-search\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 myapp\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 static\\myapp\n    \xe2\x94\x82            \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 myapp.js\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 templates\\search\n                    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.html\n

\n

编辑：可能是因为我在本地主机上运行而不是在服务器上运行吗？

\n

Answer 1

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

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

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

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

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

Answer 2

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

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

然后myapp.js你必须js-search使用相对路径导入node_modules，因为你没有使用像 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]