我想在两个 TypeScript 项目之间共享代码。我不想将共享代码发布到 NPM——只是想将共享代码放在一个项目中并在另一个项目中使用它。我正在使用 Webpack和 awesome-ts-loader .当前文件夹结构(简化)如下:
/devroot/
mainProject/
tsconfig.json
src/
shared/
SomeSharedTypes.ts
apiProject/
tsconfig.json
webpack.config.js
src/
UseSomeSharedType.ts
在 UseSomeSharedType.ts
中,我希望能够从 SomeSharedTypes.ts
导入类型。
我试过这样一个明显的解决方案:
import {SharedType} from '../../mainProject/src/shared/SomeSharedTypes'
但是 TS 编译器给了我这个错误:
TS6059: File '/devroot/mainProject/src/shared/SomeSharedTypes.ts' is not under 'rootDir' '/devroot/apiProject'. 'rootDir' is expected to contain all source files.
最佳答案
我从this Medium article得到的第一个想法,这是使用 TypeScript 的 non-relative module imports特征。这将允许我像这样编写我的导入:
import {SharedType} from '@foo/SomeSharedTypes'
使用文章中描述的技术,我向我的 tsconfig.json
添加了一个 paths
配置:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@foo/*": ["../mainProject/src/shared/*"],
},
"rootDir": "./",
...
}
}
然后,再次按照文章的建议,对于 awesome-typescript-loader 的用户,我必须修改我的 webpack.config.js
以添加一个解析插件:
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
. . .
resolve: {
extensions: ['.js', '.json', '.ts'],
plugins: [
new TsConfigPathsPlugin(),
],
}
重要提示:此插件需要进入文件的 resolve/plugins
部分,而不是根级“plugins
”部分!如果你把解析器插件放在错误的地方,你会得到这个错误:
resolver.ensureHook is not a function
上面的步骤让我在这个过程中走得更远——TypeScript 现在能够找到我的文件了!——但是我稍后在 webpack 的执行中仍然遇到同样的错误:'rootDir' is expected to contain all source文件。
经过大量谷歌搜索后,我在 this StackOverflow answer 中找到了解决方案: 而不是单个 rootDir
配置,TS 有一个 rootDirs
允许多个根的设置。我从 tsconfig.json
中删除了我的 rootDir
设置并添加了一个 rootDirs
设置:
"rootDirs": [
"./",
"../mainProject",
],
接下来,我在包含的其他项目 TypeScript 文件中遇到了 webpack 错误:
Module parse failed: Unexpected token (3:15)
You may need an appropriate loader to handle this file type.
又经过一个小时的故障排除,我发现我需要将我的新共享文件夹告诉 webpack 加载器。像这样:
const path = require('path');
. . .
rules: [
{
test: /\.[jt]sx?$/,
loader: "awesome-typescript-loader",
include: [
__dirname,
path.resolve(__dirname, "../mainProject/src/shared/")
],
exclude: /node_modules/
},
成功了!这个解决方案的好处是我可以在不更改源代码的情况下重构我的文件夹结构。我需要更改的只是 tsconfig.json
和 webpack.config.js
。
诚然,我是 webpack 和 TypeScript 的新手,所以可能有比上面那个更好的解决方案……但上面那个对我有用!
在此分享解决方案,方便后续开发者查找。
关于typescript - 使用 TypeScript 和 webpack 在项目之间共享代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52487112/