浏览器找不到导入的 javascript 包，生成错误 404

Question

我正在尝试构建一个导入和使用 JS 包的网页，然后是 tutorial 用于 LiveChat。这表示使用

导入

import LiveChat from '@livechat/agent-app-widget-sdk';

然而，这会导致此错误：

Uncaught TypeError: Failed to resolve module specifier "@livechat/agent-app-widget-sdk". Relative references must start with either "/", "./", or "../".

我认为以“/”开头应该可以解决这个问题，但后来我明白了：

Failed to load resource: the server responded with a status of 404 (Not Found)

我尝试了几种不同的方法来引用包（包括 "node_modules" 和使用主 JS 文件的完整路径，agentapp-widget.cjs.js）。毫无疑问我做错了什么，但我不确定是什么。 Webstorm 中的文件：

HTML 文件:

<head>
    <link rel="stylesheet" href="//cdn.livechatinc.com/boilerplate/1.1.css">
    <link rel="stylesheet" href="style.css">
</head>
<br>
<form class="form">
    <label class="form__label" for="claimid">
        <input type="number" style="" class="form__input" id="claimid">
    </label>
    <button class="button yellow" type="button" onclick="addToClaims()">
        <span>Sla op</span>
    </button>
</form>

<div class="container">
    <h4>Claim ID's</h4>
    <div id="claims">

    </div>
</div>

<script type="module" src="main.js"></script>
</body>

JS文件：

import LiveChat from '/@livechat/agent-app-widget-sdk';

function addToClaims() {
    
}

function removeFromClaims(element) {
    
}

window.onload = function() {
    LiveChat.init();
};

谁能告诉我这是 Webstorm 配置问题、引用错误还是其他原因？

Answer 1

@livechat/agent-app-widget-sdk 库以仅适合在 Node.js 生态系统中使用的格式发布；你不能使用新的 ES6 <script type="module"> 在浏览器中加载它。有关这方面的更多信息，请参阅 https://salomvary.com/es6-modules-in-browsers.html#using-external-dependencies

浏览器找不到导入的 javascript 包，生成错误 404

Browser cannot find imported javascript package, generates error 404

javascript

livechat

webstorm

node-modules