问题描述
我想在两个TypeScript项目之间共享代码.我不想将共享代码发布到NPM,而只是想将共享代码放在一个项目中并在另一个项目中使用它.我正在使用 Webpack 和真棒-ts-loader .当前的文件夹结构(简化)如下:
I want to share code between two TypeScript projects. I don't want to publish shared code to NPM-- just want to put shared code in one project and use it in another project. I'm using Webpack and awesome-ts-loader. Current folder structure (simplified) is like this:
/devroot/
mainProject/
tsconfig.json
src/
shared/
SomeSharedTypes.ts
apiProject/
tsconfig.json
webpack.config.js
src/
UseSomeSharedType.ts
在UseSomeSharedType.ts
中,我希望能够从SomeSharedTypes.ts
导入类型.
In UseSomeSharedType.ts
, I want to be able to import types from SomeSharedTypes.ts
.
我尝试了一个显而易见的解决方案,如下所示:
I tried an obvious solution like this:
import {SharedType} from '../../mainProject/src/shared/SomeSharedTypes'
但是TS编译器给了我这个错误:
But the TS compiler gave me this error:
推荐答案
我从这篇中篇文章,该文章使用TypeScript的非相对模块导入功能.这样,我就可以这样编写导入文件:
The first idea I got from this Medium article, which was to use TypeScript's non-relative module imports feature. This would allow me to write my imports like this:
import {SharedType} from '@foo/SomeSharedTypes'
使用本文中介绍的技术,我在tsconfig.json
中添加了paths
配置:
Using the techniques described in the article, I added a paths
configuration to my tsconfig.json
:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@foo/*": ["../mainProject/src/shared/*"],
},
"rootDir": "./",
...
}
}
然后,再次按照文章的建议,对于awesome-typescript-loader的用户,我不得不修改我的webpack.config.js
以添加一个解析插件:
Then, again as the article recommends, for users of awesome-typescript-loader, I had to modify my webpack.config.js
to add a resolution plugin:
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
. . .
resolve: {
extensions: ['.js', '.json', '.ts'],
plugins: [
new TsConfigPathsPlugin(),
],
}
重要提示:此插件需要进入文件的resolve/plugins
部分,而不是根目录级别的"plugins
"部分!如果将旋转变压器插件放在错误的位置,则会出现此错误:
Important: this plugin needs to go into the resolve/plugins
section of the file, not the root-level "plugins
" section! If you put the resolver plugin in the wrong place, you'll get this error:
上面的步骤使我在过程中走得更远-TypeScript现在可以找到我的文件了!-但是稍后在webpack的执行中我仍然遇到相同的错误:'rootDir' is expected to contain all source files.
The steps above got me further along in the process-- TypeScript was now able to find my files!--but I still got the same error later in webpack's execution: 'rootDir' is expected to contain all source files.
经过更多的Google搜索之后,我在此StackOverflow答案中找到了一个解决方案:而不是单个rootDir
配置,TS具有 rootDirs
允许多个根的设置.我从tsconfig.json
中删除了rootDir
设置,并添加了rootDirs
设置:
After a lot more Googling, I found a solution in this StackOverflow answer: instead of a single rootDir
configuration, TS has a rootDirs
setting that allows multiple roots. I removed my rootDir
setting from tsconfig.json
and added a rootDirs
setting:
"rootDirs": [
"./",
"../mainProject",
],
接下来,我遇到了我所包含的另一个项目的TypeScript文件的webpack错误:
Next, I ran into a webpack error on the other-project TypeScript file I was including:
您可能需要适当的加载程序来处理此文件类型.
You may need an appropriate loader to handle this file type.
经过一个小时的故障排除后,我发现我需要告诉webpack加载器我的新共享文件夹.像这样:
After another hour of troubleshooting, I figured out that I need to tell the webpack loader about my new shared folder. Like this:
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
.
That worked! The nice part about this solution is that I can refactor my folder structure without changing source code. All I'd need to change is tsconfig.json
and webpack.config.js
.
我当然不熟悉使用webpack和TypeScript,所以可能有比上述解决方案更好的解决方案...但是上述解决方案对我有用!
I'm admittedly new to using webpack and TypeScript, so there may be a better solution than the one above... but the one above worked for me!
在此处共享解决方案,以使下一个开发人员更容易找到它.
Sharing the solution here to make it easier for the next developer to find it.
这篇关于使用TypeScript和Webpack在项目之间共享代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!