Реагировать-родной как импортировать корневой каталог проекта?

Ответ 1

Псевдоним в React Native Существует точка, где у вас будет несколько файлов и папок в вашем проекте. И нам нужно получить ссылку на один файл из другого при любых случайных возможностях. Если мы идем по относительному пути, такому как

import themes from '../../config/themes';

тогда нам действительно очень сложно понять, где он взят символом ‘../ ‘, а в более сложном проекте это ночная кобыла.

В этом посте мы найдем возможное решение и альтернативу для этого типа сценария. Давайте рассмотрим пример проекта со следующей структурой папок.

Your App Root Directory
 |-- app
      |-- component 
      |    |-- login
      |    |   |-- login.js
      +-- resources
      |    |-- icon
      |    |    |-- userupload.png  
 |-- index.ios.js
 |-- index.android.js

У нас есть два возможных решения для указания каждого узла в приведенной выше структуре папок.

Используйте @providesModule (обновление: не будет работать для версий RN 56 и выше. https://github.com/facebook/react-native/issues/21152)

Второе решение, которое работает, но менее "безопасно", - это использование @providesModule в вашем файле. Это происходит с меньшими затратами, но поскольку оно основано на внутреннем сценарии использования Facebook, оно может измениться в зависимости от их внутренней прихоти. Вы можете прочитать больше об этом здесь:https://github.com/facebook/fbjs

Чтобы использовать его, необходимо добавить этот комментарий вверху файла:

/**
 * @providesModule login
 */

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from 'react-native';

export default class login extends Component{
 render(){
 return(
 <View>
 <Text> this is login page
 </Text>
 </View>
 );
 }
}

Затем вы можете импортировать его так же, как указано выше:

import themes from 'login';

Использовать babel-plugin-module-alias

Плагин babel для перезаписи (сопоставления, псевдонима, разрешения) каталогов как разных каталогов в процессе Babel. Это особенно полезно, когда у вас есть файлы, которые вы не хотите использовать с относительными путями (особенно в больших проектах).

Использование:

Установить Babel Cli

npm install --g babel-cli

Установите babel-plugin-module-alias.

$ npm install --save babel babel-plugin-module-alias

Создайте файл .babelrc в корневом каталоге или добавьте ключ babel: ваши проекты package.json и добавьте следующие строки кода.

"babel":{
  "plugins": [[
    "module-alias", [
      { "src": "./app", "expose": "app" },
      { "src": "./app/resources/icon", "expose": "icon" }
      ]
   ]]
 }

и, наконец, очистите кеш и перезапустите сервер узла

 npm start -- --reset-cache

Полный исходный код можно скачать с здесь

Ответ 2

использовать babel-plugin-module-alias

npm install --save babel babel-plugin-module-alias

создайте файл .babelrc для корневого каталога проекта.

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["babel-plugin-module-alias", [
      { "src": "./application", "expose": "app" }
    ]]
  ]
}

команда запуска:

   npm start -- --reset-cache

Теперь мы можем сделать:

....
import themes from 'app/config/themes';
import themes from 'app/config/redux';
import ... from 'app/...';
...

Ответ 3

Я вижу 2 решения для достижения того, что вы хотите:

1) Создайте пакет "Темы"

Одна вещь, которая хороша в пакере React Native, это то, что он будет собирать любые "пакеты" (или "модули узлов"), которые находятся где угодно в структуре вашего проекта.

Это означает, что в вашем каталоге config вы можете иметь каталог с themes с package.json (с полем "имя" "themes") и index.js (index.js будет содержать код, который вы сейчас имеете в 'приложение /Config/темы'.)

Затем, когда вы хотите импортировать этот код, вы можете просто сделать:

import themes from 'themes';

Помните, что вы можете разместить этот "пакет" где угодно в своей структуре каталогов. Хотя это "не совсем" то, что вы искали, это определенно рабочее решение.

2) Используйте @providesModule (обновление: не будет работать для RN версий 56 и выше. Https://github.com/facebook/react-native/issues/21152)

@providesModule решение, которое будет работать, но менее "безопасно", - это использовать @providesModule в вашем файле. Это происходит с меньшими затратами, но поскольку оно основано на внутреннем сценарии использования Facebook, оно может измениться в зависимости от их внутренней прихоти. Вы можете прочитать больше об этом здесь: https://github.com/facebook/fbjs

Чтобы использовать его, вам нужно добавить этот комментарий вверху вашего файла:

/**
 * @providesModule themes
 */

Затем вы можете импортировать его так же, как указано выше:

import themes from 'themes';

Вот пример его использования в самом проекте React Native: https://github.com/facebook/react-native/blob/master/Libraries/Text/Text.js#L9

Ответ 4

Вы можете создать файл package.json, содержащий { "name": "root" } в своей корневой папке. Обратите внимание, что это может быть другой файл, чем исходный "package.json", который имеет каждый проект.

И если вы хотите использовать другую папку с именем X, запомните package.json с { "name": "X" }. поэтому теперь вы можете просто использовать import foo from 'X/foo' в своем проекте.

для получения дополнительной информации проверьте их.

https://github.com/facebook/react-native/issues/3099#issuecomment-221815006 https://medium.com/@davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1

Ответ 5

На самом деле это не касается React Native. Я думаю, что это больше вопрос Вавилона. Ответ на самом деле довольно прост - используйте Модуль Resolver. Это позволяет настроить преобразователь-спецификатор-URL-адрес для использования в Babel. Это особенно полезно для предотвращения относительных URL-адресов.

Сначала выполните следующую команду:

$ npm install --save-dev babel-plugin-module-resolver

Затем в файле ".babelrc" или в атрибуте babel вашего проекта "package.json" укажите параметры плагина:

"plugins": [[
  "module-resolver", {
    "root": ["./application"]
  }
]]

Наконец, очистите кэш и перезапустите сервер node

$ npm start -- --reset-cache

Ответ 6

Используйте babel-plugin-module-resolver.

Существующие ответы были многословными, устаревшими и делали его более сложным, чем нужно. Я чувствовал себя обязанным добавить краткий ответ, чтобы помочь другим.

1. Установите пакет:

   npm install --save-dev --save-exact babel-plugin-module-resolver
   

2. Измените или создайте файл .babelrc в своем корневом каталоге следующим образом:

   {
     "plugins": [
       [ "module-resolver", { "root": ["./"] } ] 
     ]
   }
   

   Вы можете изменить ./ на корень вашего кода, например, ./application или что-то в этом роде.

3. Обновите ваши пути import:

   Вместо того, чтобы писать:

   import themes from '../../config/themes';
   

   Вы можете написать это:

   import themes from 'config/themes';
   

4. Прибыль!

Ответ 7

Чтобы использовать плагин babel, вам потребуется встроенный babel-preset-реагировать:

• Добавить babel-preset-react-native:

  $ npm i --save-dev babel-preset-react-native babel-plugin-module-alias

• Добавить .babelrc

`` `

{
  "presets": ["react-native"],
  "plugins": [
    ["module-alias", [
      { "src": "./app", "expose": "app" }
    ]]
  ]
}

`` `

3. response-native run-ios

См:

https://www.npmjs.com/package/babel-preset-react-native

https://github.com/tleunen/babel-plugin-module-alias