typescript 创建-React-应用程序类型脚本3.5,路径别名

smdncfj3  于 2022-12-05  发布在  TypeScript
关注(0)|答案(8)|浏览(151)

我尝试通过将这些值添加到tsconfig.json来设置项目中的路径别名:

"compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@store/*": ["store/*"]
    },

如果我创建一个导入,IntelliJ或VSCode都不会打扰我:

import { AppState } from '@store/index';

但是当我编译应用程序时,我收到了以下警告:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

然后它会爆说找不到引用:

TypeScript error in C:/xyz.tsx(2,26):
Cannot find module '/store'.  TS2307

是否有解决方法或create-react-app --typescript不支持?

db2dz4w8

db2dz4w81#

在我的例子中,我使用cracocraco-alias解决了这个问题
1.安装cracocraco-aliasnpm install @craco/craco --save && npm i -D craco-alias
1.在根目录中创建tsconfig.paths.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
           "@components/*" : ["./components/*"]
         }
    }
}

1.在tsconfig.json中扩展tsconfig.paths.json

{
    "extends": "./tsconfig.paths.json",
    //default configs...
}

1.在根目录中创建craco.config.js

const CracoAlias = require("craco-alias");

  module.exports = {
     plugins: [
       {
          plugin: CracoAlias,
          options: {
             source: "tsconfig",
             // baseUrl SHOULD be specified
             // plugin does not take it from tsconfig
             baseUrl: "./src",
             /* tsConfigPath should point to the file where "baseUrl" and "paths" 
             are specified*/
             tsConfigPath: "./tsconfig.paths.json"
          }
       }
    ]
  };

1.在package.json中,将"start": "react-scripts start""start": "craco start"交换

yqlxgs2m

yqlxgs2m2#

craco或重新连接 create-react-app 的别名解决方案是**react-app-alias**,适用于以下系统:第一个
根据所述系统的文档,替换package.json中的react-scripts,然后配置:

React应用程序重新连线

// config-overrides.js
const {aliasWebpack, aliasJest} = require('react-app-alias')

const options = {} // default is empty for most cases

module.exports = aliasWebpack(options)
module.exports.jest = aliasJest(options)

饼干

// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ]
}

全部

在json中配置别名,如下所示:

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

并将此文件添加到主typescript配置文件的extends部分:

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  // ...
}
aor9mmx1

aor9mmx13#

编辑- 20/3/20 -上述答案包含一个带有插件的解决方案。

有同样的问题。在发布时,它目前不支持原样。
CRA团队仍在开发该功能:https://github.com/facebook/create-react-app/pull/6116
如果您编辑tsconfig,CRA会移除变更:https://github.com/facebook/create-react-app/issues/6269
这篇文章中有一些技巧:https://github.com/facebook/create-react-app/issues/5118以使别名工作,但是需要定制CRA设置,这不适合我的用例(按原样使用CRA)。

lyr7nygr

lyr7nygr4#

路径别名在tsconfig.json中不再有效

您也可以这样做,直接导入与src目录相关的文件

转到tsconfig.json文件,将基本URL添加为"."

"compilerOptions": {
    "baseUrl":".",
    ...

然后你可以直接从src目录导入东西

import Myfile from "src/myfile.js"
brtdzjyr

brtdzjyr5#

这是一个老帖子,但我发现了一个非常简单的解决方案,只使用package.json特性。

"dependencies": {
  "@yourAlias": "file:./path/to/your/folder"
}

它可以在node.js和webpack项目中使用

vs3odd8k

vs3odd8k6#

@oklas。我已经解决了使用config-overrides.js中的以下内容,这与上面的内容相同。但是非常感谢分享这个答案:

const { alias, configPaths } = require("react-app-rewire-alias");

module.exports = function override(config) {
  alias({
    ...configPaths("base-tsconfig.json"),
  })(config);
  return config;
};
p8h8hvxi

p8h8hvxi7#

在2022中,对于那些使用弹出的TypeScript create-react-app的用户,您可以通过config/webpack.config.js中的webpack设置别名,如下所示:

// ... the other keys of webpack config;
    resolve: {
        alias: {
            // ... here set your aliases among ones the CRA sets itself
            // NB: __dirname will refer to ./config so you have to put '../src' to move up from ./config folder and set @src tp ./src, not ./config/src;
            '@src': path.join(__dirname, '../src')
            // Here set your other aliases if needed.
        }
    }

然后在ts/tsx文件中使用别名,如下所示:

import logo from '@src/assets/logo.svg';

下面是webpack resolve docs的基本知识。
请注意,CRA设置的唯一别名是src,因此您可以使用import logo from 'src/assets/logo.svg';,而无需更改webpack配置。如果别名在未弹出的应用程序中工作,您必须自行检查。

s4n0splo

s4n0splo8#

我们还使用cracots-loader解决了该问题-如下所述:https://stackoverflow.com/a/63545611/10813908
所述设置基本上允许CRA通过craco覆盖内置webpack配置进行扩展,还允许CRA代码直接引用mono-repo中外部/共享包中的typescript文件。

相关问题