Javascript ES6 模块的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46138375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trouble with ES6 Modules
提问by John Smith
Solved: Fixing the MIME types of my server fixed the problem.I had forgotten that I messed with them myself some time ago. Special Thanks to @Sidney, @estusand @Josh Leefor helping me out.
已解决：修复我的服务器的 MIME 类型解决了该问题。我忘了前段时间我自己惹了他们。特别感谢@Sidney、@estus和@Josh Lee帮助我。
Once I found a working live-demoreferenced on the MDN of ES6 Modules that just works in my current version of Chrome, I wanted to try to experiment with modules. 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. What am I missing? Could someone give me some hints about when module scripts execute and why mine doesn't?
一旦我发现ES6 模块的 MDN 上引用的一个有效的实时演示仅适用于我当前版本的 Chrome，我想尝试使用模块进行试验。可悲的是，我无法获得任何与执行相关的模块，即使现场演示工作正常。我什至将这两个文件（index.html，utils.js）复制到我服务器上的一个目录中，试图准确地重新创建实时演示，但即使是一行代码，它仍然无法运行。我错过了什么？有人可以给我一些关于何时执行模块脚本以及为什么我的不执行的提示吗？
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 articlereferenced 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:
现场演示：
采纳答案by Josh Lee
The error message here is
这里的错误信息是
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应。每个 HTML 规范对模块脚本执行严格的 MIME 类型检查。
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). - Node's http-server:
npm i -g http-server && http-server(see 2).
In your case, the error message is not being shown, indicated by
在您的情况下，未显示错误消息，由
Hide all […] 1 item hidden by filters
隐藏所有 […] 1 个被过滤器隐藏的项目
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).
- Scroll to the bottom and click ‘Restore defaults and reload'.
- 在开发工具中按 F1（或选择菜单 > 设置）。
- 滚动到底部并单击“恢复默认值并重新加载”。
回答by Nelson González
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/
upload: dist/(.*)(|\.map)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
