我正在阅读tsconfig中的路径映射。json,我想用它来避免使用以下丑陋的路径:
项目组织有点奇怪,因为我们有一个包含项目和库的单一存储库。项目按公司和浏览器/服务器/通用进行分组。
如何配置tsconfig中的路径?Json,而不是:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我可以使用:
import { Something } from "lib/src/[browser/server/universal]/...";
webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?
如果你使用的是路径,在使用tsc将typescript编译成纯javascript后,你需要将绝对路径改回相对路径才能工作。
目前最流行的解决方案是tsconfig-paths。
我试过了,但对于我复杂的设置,它不适合我。
此外,它在运行时解析路径,这意味着包大小和解析性能方面的开销。
所以,我自己写了一个解,tscpaths。
我认为它总体上更好,因为它在编译时替换路径。这意味着没有运行时依赖关系或任何性能开销。使用起来非常简单。您只需要在package.json中的构建脚本中添加一行。
这个项目非常年轻,所以如果你的设置非常复杂,可能会有一些问题。
它完美地适用于我的设置,尽管我的设置相当复杂。
2021年解决方案。
注意:CRA。最初,使用第三方库或为alias弹出应用程序的想法对我来说似乎很疯狂。然而,经过8个小时的搜索(并尝试了带有eject的变体),结果发现这个选项是最不痛苦的。
步骤1。
yarn add --dev react-app-rewired react-app-rewire-alias
步骤2。
在你的项目根目录下创建config-override .js文件,并填充如下内容:
const {alias} = require('react-app-rewire-alias')
module.exports = function override(config) {
return alias({
assets: './src/assets',
'@components': './src/components',
})(config)
}
步骤3。修复你的包裹。json文件:
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
如果@declarations不起作用,将它们添加到d.ts文件中。
例如:
“@constants”:”。/src/constants', =>在react-app-env.d中添加Ts声明模块@constants;
仅此而已。现在你可以像往常一样继续使用yarn或npm start/build/test命令。
完整版本的文档。
注意:文档中的“使用ts / js配置”部分对我不起作用。在构建项目时仍然存在“不支持别名导入”的错误。所以我用了一个更简单的方法。幸运的是,它起作用了。
这是相对路径
而不是下面的代码
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我们可以避免“../../../../.. .”/“它看起来很奇怪,也不容易读。
Typescript配置文件有相同的答案。
只要指定baseUrl,配置就会照顾你的相对路径。
配置方法:tsconfig。Json文件添加以下属性。
"baseUrl": "src",
"paths": {
"@app/*": [ "app/*" ],
"@env/*": [ "environments/*" ]
}
最终会像下面这样
import { Something } from "@app/src/[browser/server/universal]/...";
它看起来简单,令人敬畏,更可读。