ES6 模块的问题
[英]Trouble with ES6 Modules
问题描述
Solved: Fixing the MIME types of my server fixed the problem.
已解决：修复我的服务器的 MIME 类型解决了该问题。 I had forgotten that I messed with them myself some time ago.我忘了前段时间我自己惹了他们。 Special Thanks to @Sidney , @estus and @Josh Lee for helping me out.特别感谢@Sidney 、 @estus和@Josh Lee帮助我。
Once I found a working live-demo referenced on the MDN of ES6 Modules that just works in my current version of Chrome, I wanted to try to experiment with modules.一旦我发现 ES6 模块的 MDN 上引用的一个有效的实时演示仅适用于我当前版本的 Chrome，我想尝试使用模块进行试验。 Sadly I can't get anything module related to execute, even tho the live-demo works just fine.可悲的是，我无法获得任何与执行相关的模块，即使现场演示工作正常。 I even copied both files ( index.html , utils.js ) onto a directory on my server trying to recreate the live-demo exactly, but the thing still won't run even one single line of code.我什至将这两个文件（ index.html 、 utils.js ）复制到我服务器上的一个目录中，试图准确地重新创建实时演示，但即使一行代码仍然无法运行。 What am I missing?我错过了什么？ Could someone give me some hints about when module scripts execute and why mine doesn't?有人可以给我一些关于何时执行模块脚本以及为什么我的不执行的提示吗？
tl;dr: I found a working example of ES6 modules, but attempting to recreate it on my own local server does not work. tl; dr：我找到了一个 ES6 模块的工作示例，但尝试在我自己的本地服务器上重新创建它不起作用。
[Edit:] Yes, the console is set to "Hide all". [编辑：]是的，控制台设置为“全部隐藏”。 Both sites show a error for a missing favicon.ico though, so it has nothing to do with my problem.两个站点都显示缺少 favicon.ico 的错误，所以它与我的问题无关。
[Edit:] The article referenced by the MDN, containing the live-demo. [编辑：] MDN 引用的文章，包含现场演示。
[Update:] It seems that the problem is with an incorrect MIME-type given by my local server when getting the module. [更新：]问题似乎出在我的本地服务器在获取模块时给出的不正确的 MIME 类型。
index.html/test.htm: index.html/test.htm：
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<script type="module">
import {addTextToBody} from './utils.js';
addTextToBody('Modules are pretty cool.');
</script>
utils.js:实用程序.js：
export function addTextToBody(text) {
const div = document.createElement('div');
div.textContent = text;
document.body.appendChild(div);
}
mine:我的：
live-demo:现场演示：
2 个解决方案
解决方案1
4 已采纳 2017-09-10 16:10:30
The error message here is这里的错误信息是
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".
This is a new requirement for web development which thus far could mostly get away with incorrect MIME types without much trouble.这是 Web 开发的新要求，到目前为止，大多数情况下都可以轻松解决不正确的 MIME 类型。
Two quick web servers for local development which I know to have reasonable MIME handling are:我知道可以进行合理 MIME 处理的两个用于本地开发的快速 Web 服务器是：
- Python's:
python3 -m http.server(see 1 ).Python 的： python3 -m http.server（参见1 ）。 - Node's http-server:
npm i -g http-server && http-server(see 2 ).Node 的 http-server: npm i -g http-server && http-server(见2 )。
In your case, the error message is not being shown, indicated by在您的情况下，未显示错误消息，由
Hide all […] 1 item hidden by filters
Fix this by clicking 'Hide all' and choosing 'Default' (and you may wish to set this to 'All levels' while working).通过单击“全部隐藏”并选择“默认”来解决此问题（您可能希望在工作时将其设置为“所有级别”）。 Or reset the devtools to its default state:或者将 devtools 重置为其默认状态：
- Press F1 in the devtools (or choose menu > Settings).在开发工具中按 F1（或选择菜单 > 设置）。
- Scroll to the bottom and click 'Restore defaults and reload'.滚动到底部并单击“恢复默认值并重新加载”。
解决方案2
1 2020-02-28 00:14:19
I solved the problem using this yaml .我使用这个yaml解决了这个问题。
runtime: python38
service: yourservice
handlers:
- url: /(.*\.(gif|png|jpg|less|json|woff|woff2|ttf|eot|scss|css|js|ico|svg)(|\.map))$
static_files: dist/\1
upload: dist/(.*)(|\.map)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.