这很尴尬,但是我不知道该怎么办。我想将我的小React Native项目移植到TypeScript,所以我用TypeScript模板创建了一个空的React Native项目,调整了tsconfig.json
以使用诸如@app
之类的自定义路径,然后尝试运行它。没有。这是昨天,我做了一些谷歌搜索,但是那些有相同问题的人建议清理打包程序,删除node_modules
,然后重新安装软件包,例如this one,所以我做到了,没用。
这些是我重新安装react-native-cli
的步骤(起初,我认为问题出在过时的软件包上,不是):
npm uninstall -g react-native-cli
yarn global add @react-native-community/cli
下面的内容我已经关注了很多次,所以我不记得确切的数字:
npx react-native init MyApp --template react-native-template-typescript
yarn add redux redux-logger redux-thunk react-redux
yarn add --dev @types/react @types/react-redux @types/redux-logger
然后对tsconfig.json
进行更改,因此看起来像这样(我的更改标记为->
):
{
"compilerOptions": {
/* Basic Options */
"target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": ["dom", "esnext"], /* Specify library files to be included in the compilation. */
"allowJs": true, /* Allow javascript files to be compiled. */
"jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
"noEmit": true, /* Do not emit outputs. */
"incremental": true, /* Enable incremental compilation */
"isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
/* Module Resolution Options */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-> "baseUrl": "./src", /* Base directory to resolve non-absolute module names. */
-> "paths": { /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-> "@app/*": ["./*"]
-> },
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
},
"exclude": [
"node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
]
}
我的项目结构如下:
MyApp
├── ios
├── android
├── src
│ ├── index.tsx
│ ├── constants
│ │ └── app.json
│ ├── support
│ │ └── store.tsx
│ └── reducers
│ └── index.tsx
├── tsconfig.json
├── package.json
├── index.js
└── [ the rest ]
当我尝试在import {initStore} from '@app/support/store'
中MyApp/src/index.tsx
时,Metro会给我以下信息:
Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `@app/support/store` from `src/index.tsx`: @app/support/store could not be found within the project.
然后,我尝试使用以下命令进行清理,但是这样做也没有任何好处:
watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache
但是,有趣的是,在我调整了tsconfig.json
之后,Atom并没有抱怨@app/support/store
这样的路径,它甚至提供了自动补全功能,它将@app/support/
识别为目录,并且将{{1 }}作为脚本,因此我认为@app/support/store
不是问题。
答案 0 :(得分:3)
似乎问题出在babel配置上。您需要运行
yarn add --dev babel-plugin-module-resolve
要安装module-resolver,然后调整babel.config.js
,使其看起来像这样:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: [
'./src',
],
alias: {
'^@app/(.+)': './src/\\1',
},
},
],
],
};