javascript - react native - absolute import with alias name in package.json - Stack Overflow

admin管理员组

文章数量:1333190

I saw some projects using import '@someDir/something', which solves the relative import evil.

Then I found this blog post talking about this method. It basically tells you to create package.json in directories and specify their alias names.

I implemented it in my react-native project, which is based on expo, and it works well.

Something like this:

{"name": "@someDir"}

inside src/someDir/package.json.

And I can import '@someDir/something' everywhere.

Why is this working? Where is the magic happening behind? Webpack or babel or react-native itself?

I saw an issue discussing about this feature but I don't know where is it implemented.

My .babelrc:

{
  "presets": ["babel-preset-expo"],
    "env": {
        "development": {
              "plugins": ["transform-react-jsx-source"]
      }
    }
}

It digged into the babel dependecies but cannot find anything related.

I saw some projects using import '@someDir/something', which solves the relative import evil.

Then I found this blog post talking about this method. It basically tells you to create package.json in directories and specify their alias names.

I implemented it in my react-native project, which is based on expo, and it works well.

Something like this:

{"name": "@someDir"}

inside src/someDir/package.json.

And I can import '@someDir/something' everywhere.

Why is this working? Where is the magic happening behind? Webpack or babel or react-native itself?

I saw an issue discussing about this feature but I don't know where is it implemented.

My .babelrc:

{
  "presets": ["babel-preset-expo"],
    "env": {
        "development": {
              "plugins": ["transform-react-jsx-source"]
      }
    }
}

It digged into the babel dependecies but cannot find anything related.

• javascript
• node.js
• react-native
• expo
• es6-modules

Share Improve this question Follow edited Mar 12, 2018 at 18:21 Nakamura asked Mar 12, 2018 at 18:15 NakamuraNakamura 1,04122 gold badges1313 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

It seems to be part of metro, the javascript bundler for react native.

https://www.belighted./blog/react-and-react-native-directories-management

https://facebook.github.io/metro

本文标签： javascriptreact nativeabsolute import with alias name in packagejsonStack Overflow