typescript - 使用 TypeScript 和 webpack 在项目之间共享代码
问题描述
我想在两个 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:文件“/devroot/mainProject/src/shared/SomeSharedTypes.ts”不在“rootDir”“/devroot/apiProject”下。'rootDir' 应包含所有源文件。
解决方案
我从这篇 Medium 文章中得到的第一个想法是使用 TypeScript 的非相对模块导入功能。这将允许我这样编写我的导入:
import {SharedType} from '@foo/SomeSharedTypes'
使用文章中描述的技术,我添加了一个paths
配置到我的tsconfig.json
:
{
"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 不是函数
上面的步骤让我在这个过程中走得更远——TypeScript 现在可以找到我的文件了!——但我在 webpack 的执行过程中仍然遇到了同样的错误:'rootDir' is expected to contain all source files.
经过更多的谷歌搜索,我在这个 StackOverflow 答案rootDir
中找到了一个解决方案: TS 有一个rootDirs
允许多个根的设置,而不是单个配置。我从中删除了我的rootDir
设置tsconfig.json
并添加了一个rootDirs
设置:
"rootDirs": [
"./",
"../mainProject",
],
接下来,我在包含的其他项目 TypeScript 文件中遇到了 webpack 错误:
模块解析失败:意外令牌 (3:15)
您可能需要适当的加载程序来处理此文件类型。
在又一个小时的故障排除后,我发现我需要告诉 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
and webpack.config.js
。
诚然,我是使用 webpack 和 TypeScript 的新手,所以可能有比上述解决方案更好的解决方案……但上述解决方案对我有用!
在此分享解决方案,以便下一个开发人员更容易找到它。
推荐阅读
- api - 我可以使用 Wagtails API 从单个 API 端点为多个站点提供支持吗?
- r - 如何根据多个标准将数据框分组
- java - 无法使用 ButterKnife 在开关盒中绑定可绘制对象
- kubernetes - 如何处理 Kubernetes 中持久/状态相关的 pod 启动失败?
- c++ - 为什么 O(2^n) 与 O(2^(n/2)) 不同?
- configuration - 使用 HashiCorp Vault KV v2 进行 confd 配置
- jira - 将任务分配给 Jira 中的两个或更多人
- python - 用户输入从高到低排序并删除重复输入
- zurb-foundation - 基础 6:包装时的顶部栏左右堆栈
- python - 用于过滤空类别的上下文处理器