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

【问题标题】：Browser cannot find imported javascript package, generates error 404浏览器找不到导入的 javascript 包，生成错误 404
【发布时间】：2018-12-11 14:06:20
【问题描述】：

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

导入

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

然而这会导致这个错误：

未捕获的类型错误：无法解析模块说明符“@livechat/agent-app-widget-sdk”。相对引用必须以“/”、“./”或“../”开头。

我认为应该以“/”开头，但后来我明白了：

加载资源失败：服务器响应状态为 404（未找到）

我尝试了几种不同的方法来引用包（包括“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 配置问题、引用错误还是其他原因？

【问题讨论】：

标签： javascript webstorm node-modules livechat

【解决方案1】：

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

【讨论】：