Roy*_*hal 7 javascript ecmascript-6 es6-module-loader es6-modules
我正在开始一个新项目，我想要在其中使用 ES6 样式模块，但是，我无法让它在浏览器中运行。我正在使用 Chrome。
我将问题隔离在很少的代码行中。
这是我的 2 个 TypeScript 文件：
应用程序
import { Component } from './component';
var component: Component = new Component();
组件.ts
export class Component {
}
以下是它们编译为 JavaScript 的方式：
应用程序.js
import { Component } from './component';
var component = new Component();
组件.js
export class Component {
}
我的 index.html 只包含一个脚本标签。我尝试了一些变体，但没有一个奏效。
index.html #1
<script src="src/app.js" type="module"></script>
未加载脚本。（网络选项卡中没有请求）
index.html #2
<script src="src/app.js" type=module></script>
未加载脚本。（网络选项卡中没有请求）
index.html #3
<script src="src/app.js"></script>
未捕获的语法错误：意外的标记 {
我正在使用 tsc 通过 Visual Studio Code 转译 TypeScript。
任务文件
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "silent"
}
}
]
}
配置文件
{
"compilerOptions": {
"target": "es6",
"sourceMap": false,
"removeComments": false,
"noImplicitReturns": true,
"noImplicitAny": true,
"preserveConstEnums": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"outDir": "../src/"
},
"exclude": [
"logs",
"node_modules"
]
}
老实说 - 我认为这是一个很好的问题，因为JS它广泛用于服务器端和客户端应用程序，这导致了开发人员之间已经存在的混淆
很明显，您的TS代码是作为服务器端代码编写的（可能在 上Node.js）。尝试在客户端运行它（按原样）是......好吧......棘手。原因：您在代码中使用的语法假设在服务器端（而不是客户端）上运行。有解决方法吗？嗯，是！
好消息：
JS ES6确实有一个本地模块加载器！（检查 MDN）
坏的：
Node.js模块加载器语法不同（导出模块时）一些补充说明：
如您所见，您的问题没有快速或简单的答案......但它可能是提高您的知识和构建更好的现代网络应用程序的一个很好的起点。
更新
根据要求，我创建了一个小沙盒演示，展示了如何使用 ES6 原生模块 ( https://codesandbox.io/s/oj2rwm9v35 )
索引.html
<html>
<body>
<div id="app"></div>
<script type="module" src="src/primary.js"></script>
</body>
</html>
初级.js
import test from "./test";
test();
测试.js
export default function test() {
document.querySelector("#app").textContent = "Hello JS module!";
}
| 归档时间： |
|
| 查看次数： |
4184 次 |
| 最近记录： |