使用 create-react-app 创建自定义绝对路径
Posted
技术标签:
【中文标题】使用 create-react-app 创建自定义绝对路径【英文标题】:Creating custom absolute paths with create-react-app 【发布时间】:2020-12-25 03:20:13 【问题描述】:我使用 create-react-app
版本 3.4.1
创建了一个带有 typescript 的 React 项目。
我试图避免在我的项目中使用相对路径。这是我的项目树的一部分:
/
|_ public
|_ tests
|_ src
|____ Scenarios
|____ Components
|____c
我基本上想要的是能够做类似import '@components/c'
的事情。我尝试将此部分添加到我的tsconfig.json
文件中:
"compilerOptions":
...
"baseUrl": ".",
"paths":
"*": ["src/*"],
"tests": ["tests/*"],
"public": ["public/*"],
"@components/*": ["src/Components/*"],
"@Scenarios/*": ["src/Scenarios/*"],
,
...
但是每次我使用yarn start
启动我的应用程序时,我的 tsconfig 都会删除我的这部分代码(除了我的“baseUrl”部分之外的所有内容)。 As far as I know 从 react-create-app
的第 3 版开始,通过启用 baseUrl
属性来影响导入的根目录,部分解决了这个问题。但是我在任何地方都找不到从 tsconfig path
目录设置绝对路径的可行解决方案。部分解决方案对我不起作用,因为我可能要从公共目录导入东西。
我确实在去年尝试过这个solution,但它对我不起作用。有人设法让这个或任何其他解决方案工作吗?
理想情况下,该解决方案将使我仍然可以使用 create-react-app 而不是使用其他包,但当然任何解决方案都可以工作。
【问题讨论】:
【参考方案1】:您可以通过添加 tsconfig.extends.json 并使用 craco 或任何库来自定义 webpack 来使用您的解决方案。这是我的 craco.config.js:
const path = require('path')
module.exports =
webpack:
alias:
src: path.resolve(__dirname, './src/')
【讨论】:
以上是关于使用 create-react-app 创建自定义绝对路径的主要内容,如果未能解决你的问题,请参考以下文章
create-react-app默认配置进行自定义craco
如何在 create-react-app 中自定义 blueprintjs 外观
使用 create-react-app 时使用自定义构建输出文件夹
如何将 create-react-app 使用的错误页面合并到自定义项目中?