如何在带有 Babel 和 Webpack 的浏览器中使用 Typescript答案

【问题标题】：How to use Typescript in browser with Babel and Webpack如何在带有 Babel 和 Webpack 的浏览器中使用 Typescript
【发布时间】：2020-07-01 02:05:26
【问题描述】：

我正在尝试通过使用此架构在我的浏览器中使用 Typescript：Typescript in browser architecture

但是当我使用这个命令时导入/导出不起作用：

tsc && babel build-ts -d lib && webpack --config webpack.config.js

./lib/index.js 中的错误未找到模块：错误：无法解析“索引” 在 'C:\Users\aurel\Desktop\Platformer\lib'

./lib/index.js 中的错误未找到模块：错误：无法解析“文件” 在 'C:\Users\aurel\Desktop\Platformer\lib'

index.html：

<script src="dist/bundle.js"></script>

index.ts

export const index = "test";
import { file } from 'file';

console.log(file)

文件.ts

export const file = "test";
import { index } from 'index';

console.log(index)

webpack.config.js

const glob = require("glob");

module.exports = {
   entry: {
   js: glob.sync("./lib/**/*.js"),  
},
output: {
  filename: 'bundle.js',
  path: __dirname + '/dist',
},
};

tsconfig.json

"target": "es6",
"module": "amd",
"outDir": "./build-ts",

你有什么想法吗？我不知道该怎么做，提前谢谢！

【问题讨论】：

当此命令失败时，您的 /lib 目录中有什么？是否有 index.js 或 file.js 文件？
lib 目录包含我的 babel 文件（ index.js 和 file.js ）
Dovakeidy，而不是感谢我正在编辑我的答案，您应该批准或赞成它。谢谢！

标签： typescript webpack ecmascript-6 browser babeljs

【解决方案1】：

你的导入应该是相对的而不是绝对的：

export const index = "test";
import { file } from './file';

console.log(file)

export const file = "test";
import { index } from './index';

console.log(index)

默认情况下，将在 node_modules 目录中搜索绝对导入。

【讨论】：

天哪！谢谢，我不知道我怎么没看到！