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

Question

我正在尝试将 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

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

Answer 1

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

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

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

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

如果不是这种情况，不幸的是，您不得不进入构建工具这个非常疯狂的兔子洞。

Answer 2

您必须使用 type="module" link 您的 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]

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

How to import npm package to a client file

javascript

npm

npm-package