Javascript I'；我正努力开始使用打字脚本

这是我的项目结构

/public
  /js
    const.js
    const.js.map
    index.js
    index.js.map
  index.html
/src
  const.ts
  index.ts
package.json
tsconfig.json

index.ts

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es5","DOM"
    ],             
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./public/js",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

当我将模块设置为“commonjs”时，我遇到了这个错误

未捕获引用错误：未定义导出 索引js:21

如果我设置为“es6”，我就得到了这个

未捕获的SyntaxError:无法在模块外部使用导入语句

我真的很困惑。我在web和StackOverflow中搜索过这些错误，但大多数回复都说只需更改模块，或者使用网页包或babel即可。 但我不想使用预编译器

---

如何为我的前端开发人员解决这个问题？

您需要使用模块绑定器来处理模块解析。有很多关于如何使用带有Typescript的webpack的指南，包括

在Typescript官方网站上也有，其中包括关于谁将与webpack等构建工具集成的简要说明，以及Browserify、Duo、Gulp、Grunt等其他工具

---

我建议从webpack开始。它很容易用于基本场景，并且对于高级场景具有非常强大的功能。

基本上，现代浏览器现在支持本机

esm

模块，这意味着您可以运行代码，如果您从

es2015

以模块为目标，然后添加带有入口点的脚本标记

，谢谢！我将目标设置为“es2015”，并加载了带有“module”属性的index.js文件。我第一次遇到这个错误

GEThttp://127.0.0.1:5500/public/js/const net：：ERR_中止了404（未找到）

但是，我将模块名“/const”改为“/const.js”，它确实起了作用。我不想真正关心旧的浏览器，它使用es5作为底层支持。因此，es6非常适合我的浏览器。而且所有的文件包对我的项目来说似乎都不好，因为我并没有制作单页应用程序。所以，真的谢谢你。谢谢你的建议，谢谢。我会在网页上寻找更多信息！我用webpack的方式。经过一些试验，我的怀疑完全解决了。真的谢谢。

const message = "Hi"

export default message

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es5","DOM"
    ],             
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./public/js",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}