Question

我想知道为我的项目使用完整路径的最好方法。

例如，如果我要导入组件，我不想import Component from '../components/Component'，而只是import Component from 'app/components/Component';

有人能帮助我吗？

Answer 1

您可以通过在package.json名称部分找出应用名称然后在绝对路径前使用它来使用aboslute路径，即

import Component from MyApp/components/Component

以下是有关描述问题https://github.com/facebook/react-native/issues/3099

的更多信息

Answer 2

// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';

您可以使用babel-resolver：npmjs.com/package/babel-plugin-module-resolver。可以帮助您

Answer 3

我尝试了很多方法。每个文件夹一个 function checkGeneric() { return sequenceGeneric([f1, f2, f3]); } // function checkGeneric(): Result<[string, boolean, number], string> 文件对我来说听起来有点太多了。此外，我遇到了问题，因为它会开始抱怨我的 package.json 声明。

我发现的最佳解决方案是 this one，基于 import React from 'react'（如果您使用的是 Expo）。它使用 babel-plugin-module-resolver，一个 40KB 的库，数百万次下载。有了这个，你必须：

将您的 babel.config.js 设置为：

babel.config.js

这应该足够了。但是，如果您像我一样使用 module.exports = function(api) { api.cache(true); return { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'module-resolver', { root: ['.'], extensions: [ '.ios.ts', '.android.ts', '.ts', '.ios.tsx', '.android.tsx', '.tsx', '.jsx', '.js', '.json', ], alias: { app: './src/app', helpers: './src/helpers', ... }, }, ], ], }; };，您可能还想通过防止 IDE 抱怨导入来取悦您的 IDE。

按如下方式编辑您的 typescript：

tsconfig.json

我有点难以理解配置，因为那篇文章将 { "compilerOptions": { ... "baseUrl": ".", "paths": { "app/*": ["./src/app/*"], "helpers/*": ["./src/helpers/*"], ... }, ... } } 显示为基本文件夹，而我使用的是 app。没什么大不了的，只需将其转换为我的场景即可。我的文件结构如下，顺便说一句：

src

Answer 4

要拥有绝对路径，

我正在考虑您的package.json在根目录中。

在内部，您的package.json添加一个新的属性名称，其值可以是您想要的值

"name": "root"

，然后导入相对于该路线的所有路线

import Component from root/components/Component

Answer 5

在每个人的答案之上

您实际上可以在其他文件夹中的任何位置创建一个package.json

例如，您有：

▾ assets/
  ▸ home/
  ▸ png/
    favicon.png
    icon.png
    splash.png
▾ components/
  ▸ display/
  ▸ filters/
  ▸ forms/
  ▾ images/home/
      feedback.js
    index.js
▸ crud/

如果您在资产文件夹中使用值创建package.json

{"name": "assets"}

然后，您可以使用assets/png/someimage.png

导入任何其他JS。

您还可以使用包含babel.config.js的babel模块解析器（如果您正在使用expo）

修改为：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          root: ["./"],
          alias: {
            assets: "./assets",
            components: "./components",
            crud: "./crud",
            helpers: "./helpers",
          },
        },
      ],
    ],
  };
};

反应原生使用绝对路径？而不是从'../../something/X'进行导入X？

5 个答案: