我正在阅读tsconfig中的路径映射。json，我想用它来避免使用以下丑陋的路径:
项目组织有点奇怪，因为我们有一个包含项目和库的单一存储库。项目按公司和浏览器/服务器/通用进行分组。
如何配置tsconfig中的路径?Json，而不是:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我可以使用:
import { Something } from "lib/src/[browser/server/universal]/...";
webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?
当前回答
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
我不确定我们是否必须定义路径。但是在将baseUrl写入src之后 我可以像这样导入SRC文件夹下的所有文件夹
import { Home } from "pages";
import { formatDate } from "utils";
import { Navbar } from "components";
不要忘记在修改tsconfig.json后重新启动您的终端
其他回答
如果你正在寻找用@引用根文件夹的最简单的例子，这将是它:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"]
}
}
}
// Example usage: import * as logUtils from '@/utils/logUtils';
或者如果你甚至没有src文件夹，或者想要显式地将它包含在导入中，这也可以工作:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["*"]
}
}
}
// Example usage: import * as logUtils from '@/src/utils/logUtils';
确保你有 ｀ { “compileOnSave”:没错, " compilerOptions ": { "路径":{ “@styles /”:(“资产/ scss /”) ｝ }， ｝
｀ 这给我带来了麻烦。
这可以在您的tsconfig上设置。json文件，因为它是一个TS特性。
你可以这样做:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...
请记住，你想要引用的路径，它以你的baseUrl作为你所指向的路由的基础，这是强制性的，如文档所述。
字符“@”不是强制性的。
设置好之后，你可以像这样轻松地使用它:
import { Yo } from '@config/index';
你可能会注意到的唯一一件事是，智能感知在当前的最新版本中不起作用，所以我建议在导入/导出文件时遵循索引约定。
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
对于组件库
如果你正在处理一个返回UI组件的库(如react-bootstrap或antd)，那么这应该适合你。
"compilerOptions": {
....
"rootDir": "src",
"baseUrl": ".",
"paths": {
"src/*": ["src/*"],
"components/*": ["src/components/*"],
}
},
如果typescript + webpack 2 + at-loader正在使用，有一个额外的步骤(@mleko的解决方案只部分适用于我):
// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
resolve: {
plugins: [
new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
]
}
TypeScript 2.0中的高级路径解析
