我的Yarn工作区结构如下:
/project
package.json
/packages
/app
package.json
webpack.config.js
tsconfig.json
/src
index.ts
/api-adapter
package.json
/src
api.ts
要构建/app
软件包,我将Webpack与ts-loader结合使用。这是配置:
// /packages/app/webpack.config.js
module.exports = {
entry: path.resolve(__dirname, "src/client/index.ts"),
mode: "development",
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {...}
};
和tsconfig.json
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"noImplicitAny": true,
"outDir": "./dist/",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"lib": ["dom", "es6", "webworker"]
}
}
当我想从其他工作空间导入模块时:
// /packages/app/src/index.ts
import { fetchSomething } from "api-adapter/src/api";
发生错误:
ERROR in ../api-adapter/src/api.ts
Module build failed (from /home/user/project/node_modules/ts-loader/index.js):
Error: Typescript emitted no output for /home/user/project/packages/api-adapter/src/api.ts.
但是当我添加要导入的扩展名时,一切正常:
// /packages/app/src/index.ts
import { fetchSomething } from "api-adapter/src/api.ts";
如何修复webpack配置以将任何工作空间模块导入为Typescript而无需扩展名?
我已经尝试过:
rules: [{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
include: [
__dirname,
path.resolve(__dirname, "../packages")
],
}]
具有:
ERROR in ../api-adapter/src/api.ts 3:34
Module parse failed: Unexpected token (3:34)
You may need an appropriate loader to handle this file type.
答案 0 :(得分:1)
Webpack配置正确。 ts-loader
找到了一个文件,但编译器拒绝了它:Error: Typescript emitted no output
由于路径:
// tsconfig.json
{
"compilerOptions": {
...
},
"include": [
"src/**/*",
"../../packages/**/*"
]
}