Monorepo Tsconfig路径，如何让它与webpack一起工作？
Monorepo Tsconfig路径指的是在使用Monorepo项目架构时，配置TypeScript编译器(tsconfig.json)的路径问题。为了让它与Webpack打包工具协同工作，我们可以按照以下步骤进行配置：
- 在Monorepo根目录下创建一个统一的tsconfig.json文件，用于管理所有子项目的TypeScript配置。
- 在tsconfig.json中，配置"include"选项来指定需要编译的文件路径。可以使用通配符进行匹配，例如：{"include": ["packages/*/src"] }表示编译所有packages目录下的src目录中的代码。
- 在每个子项目的根目录下，也可以创建一个局部的tsconfig.json文件，用于针对该子项目进行特定的TypeScript配置。
- 在子项目的tsconfig.json中，配置"extends"选项来继承Monorepo根目录下的tsconfig.json配置。例如：{"extends": "../../tsconfig.json"}。
- 在Webpack的配置文件中（一般是webpack.config.js或者webpack.config.ts），使用ts-loader来加载TypeScript文件，并通过"configFile"选项来指定tsconfig.json的路径。
- 配置Webpack的入口文件，将其指向Monorepo根目录下的统一入口文件。
这样配置之后，Webpack会根据tsconfig.json中的配置进行TypeScript编译，并根据入口文件打包生成最终的输出文件。
对于Monorepo Tsconfig路径的优势在于统一管理了所有子项目的TypeScript配置，便于维护和协作开发。适用于大型项目或者多个相关项目的情况。通过合理的配置，可以实现代码共享、模块化开发等优势。
以下是腾讯云的相关产品和产品介绍链接地址：
- 云函数 SCF（Serverless Cloud Function）：腾讯云提供的无服务器计算服务，可通过云函数来执行自定义的后端逻辑。了解更多：https://cloud.tencent.com/product/scf
- 云开发 CloudBase（Tencent Cloud Base）：腾讯云提供的一站式应用开发平台，包括云函数、云数据库、云存储等一系列服务，能够帮助开发者快速构建和部署应用。了解更多：https://cloud.tencent.com/product/tcb
- 云原生 Kubernetes：腾讯云提供的容器编排管理平台，支持以容器为基础的应用程序部署和管理。了解更多：https://cloud.tencent.com/product/tke
以上是关于Monorepo Tsconfig路径与Webpack配合工作的完善且全面的答案。希望对您有所帮助！
相关·内容
我试图建立一个typescript的monorepo，并需要导入模块，如在路径配置中定义的一样。"paths": {} 根据配置，我应该能够像这样导入包； import X from "@monorepo/web/x" !import X from "@monorepo/web
浏览 40提问于2020-07-08得票数 0
回答已采纳
在tsconfig.json文件中定义了一个路径映射，如下所示 "~/*": ["./src/*"]它与ts-node -r tsconfig-paths/register一起工作，但是当涉及到从.ts编译到.js文件的serverless-plugin-typescript以前，我用 webpack 和tsconf
浏览 1提问于2019-07-25得票数 4
1回答
.│ └── messages| ├── src| ├── dist│ ├── package.json│ ├── src ├── package.json ├── setup
浏览 0提问于2018-05-08得票数 2
回答已采纳
故事书带有Webpack的配置，直到Webpack v4才能使用并声明自定义tscofnig (或任何其他插件)为： config.resolve.plugins = [new TsconfigPathsPlugin()]; }
有没有人让它与We
浏览 26提问于2022-04-22得票数 0
回答已采纳
我正在尝试创建以下monorepo结构：project-1 | src | tsconfig.json
|在这两个tsconfig中，我都添加了路径'shared': '[../shared]'，这允许我直接从共享导入代码。关于如何让linter识别两个项目中的shared文件夹，而不禁用tslint规则，您有什么想法吗？
浏览 27提问于2021-05-28得票数 0
npx create-react-app my-app --template typescript结果==>没有工作！
tsconfig.paths.json在tsconfi
浏览 2提问于2021-11-24得票数 5
2回答
/shared",我在nestjs项目中也这样做了，编辑器中没有错误，我可以在node_modules中看到共享包。但是，当我编译该项目时，它失败了：
{ "module": "co
浏览 12提问于2021-02-14得票数 1
/类似于路径。所以我有：{{import { Screen } from 'home-screen'webpac
浏览 0提问于2018-12-10得票数 1
正常”导出之外，还提供了类型定义，如下所示： function someGlobalFunction(): void;库B使用库A的类型定义，因此，在B库的tsconfig.json如果类库A和库B都在我的monorepo中，如何复制第1部分中的设置？首先，monorepo使用tsconfig.json文件中的tsconfig.json字段，以便包可以相互导入，而不必实际安装它们。这是琐碎的事情，而且效果很好。但是，如果我们使用types字段，
浏览 8提问于2022-08-06得票数 5
回答已采纳
我使用的是WebStorm和webpack，由于我的tsconfig设置为node_modules，因此WebStorm无法识别我的任何模块的路径，因此与WebStorm捆绑在一起的TypeScript会发出错误，如您在我的附件中所看到的…… { "target": "ES5",
"module": "commonjs&
浏览 0提问于2016-01-21得票数 0
当我使用这些接口将各个项目文件夹移动到单个的monorepo中时，我仍然在每个包中使用一个相同global.d.ts的副本，并且它工作得很好，除了复制之外，这在monorepo中没有什么意义。我在根目录下有一个共享的tsconfig.json文件，这个文件由每个包中的tsconfig.json扩展。如何将global.d.ts文件移动到monorepo的根目录，并让所有包使用它而不将其导入到每个源文件中？
我尝试更改每个包的tsconfig</
浏览 79提问于2022-03-17得票数 4
我一直试图让绝对路径与webpack 2在我的角度2项目。我使用作为我的样板代码。为了使它与绝对路径一起工作，我在webpack.config.ts中尝试了以下操作： extensions: ['.ts', '.js', '.json']: Array<string>;但是，当我尝试import {AppComponent}
浏览 4提问于2017-09-28得票数 2
回答已采纳
在一个更大的类型记录项目中，我们决定将代码移动到一个带有纱线工作区的monorepo。
我们使用webpack来构建和捆绑，一切都运行良好(尤其是本地模块/包之间的链接)。由于纱线工作区将将大部分node_modules存储在monorepo的根文件夹中，因此IDE (IntelliJ和VSCode)在编写“内部”项目(称为monorepo的“包”)时解决了将导入到任何node_modules请分享您的经验与纱线工作区/独角兽(例如，勒纳)，以及<e
浏览 6提问于2017-11-16得票数 18
"scripts": { "start": "ts-node -r tsconfig-paths/registerserver/main.ts ",
"start:dev": "cross-env NODE_ENV=development webpack --config <
浏览 46提问于2021-07-15得票数 0
3回答
我有一个用webpack编译的angular应用程序，它使用了多个入口点： 'app1': helpers.root('src', 'app1', 'main.ts使用@ngtools/webpack，我只能激活一个应用程序。有没有办法对这两个应用程序都这样做呢？new ngToolsWebpack.AngularCompilerPlugin({
tsConfigPath: helpers.root('t
浏览 1提问于2017-11-23得票数 16
/components/Hello";为此，我发现您可以在webpack中使用resolve.alias，因此我将该部分配置如下 Hello: "src/components/Hello" extensions: ["", ".ts", ".tsx", ".js"]<e
浏览 0提问于2016-11-05得票数 71
回答已采纳
1回答
我在一个使用了Webpack的Vue.js项目中工作。许多导入使用@作为src目录的别名。如何配置VSCode以解析别名并使智能感知与这些导入一起工作？我在网上的许多地方找到了如何使用jsconfig.json或tsconfig.json在VSCode中设置别名。我已经尝试在这两个文件中进行配置，但似乎都不起作用。/src/*"] },
"exclude": ["node_modules&q
浏览 2提问于2019-07-17得票数 5
我正在用TypeScript写一个NPM包，但是我找不到一个方法来转换Webpack在TypeScript声明中的别名。webpack.config.js // ...more Webpack configurations extensions: [".ts", ".js"],alias: { }tsconfig.json
浏览 0提问于2019-04-16得票数 7
回答已采纳
在我的一个文件中，我导入了另一个commonjs模块我更愿意这样做其中fv是我的src目录。所以我的应用文件夹结构是这样的： - at-angular.ts - services我是否可以通过某种方式启用typescript以使fv指向src
浏览 13提问于2016-01-07得票数 8
所以，我用这个tsconfig.json "compilerOptions": {import { xxx } from '@src/xxx';
有同样问题的人吗？对我来说，看到这种情况很奇怪，因为如果它编译/构建正确(来自tsc 和 webpack)，这意味着配置是正确的。那么为什么V
浏览 0提问于2018-07-13得票数 13
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
