Translator: Will the world be all right

The original link

By default, the ES6 module in create-react-app uses relative paths, which is appropriate if the files you want to import are relatively close together in the file tree:

Import {createGoal} from './actions'Copy the code
Import {selectAuth} from './ selectAuth ';Copy the code
The import App from '.. / App ';Copy the code

But when you start dealing with deeply nested tree structures, using relative paths can be really painful, because you end up with point-like syndrome:

Import {editUser} from '.. /.. /.. / AppContainer/actions';Copy the code
Import {selectAuth} from '.. /.. /.. /AppContainer/selectors;Copy the code

What happens when you decide to move the file? Or maybe you want to import the same module in another file?

The time to calculate how many points are required for the first walk is tedious, but now you have to recalculate each time because when you change the location of the file, you also change its relative path relative to the other files.

What if there was a way to import a file the same way every time, no matter where it was related to another file? This is where the absolute introduction comes in handy:

The import {editUser} from 'containers/AppContainer/actions;Copy the code
The import {selectAuth} from 'containers/AppContainer/selectors;Copy the code

No matter where you import these files, the path is the same. You don’t have to calculate how many points you need.

Implement absolute imports in create-react-app

After digging into a bunch of Github issues, I finally went through the steps needed to implement absolute imports in the create-React-app application, finishing up with two steps:

  1. Create a ‘.** env **’ file in the root directory (same level as package.json)
  2. Set an environment variable, ‘NODE_PATH’ to ‘SRC/’

This is

As far as I know, create-React-app is configured in such a way that its webpack configuration automatically selects the ‘.env’ file and reads the ‘NODE_PATH’ environment variable, which can then be used for absolute imports.

Custom environment variables can be used in both development and production, because variables are embedded at build time, not runtime, so your application can access its environment via ‘process.env’ :

Github.com/facebookinc…

The discussions:

Github.com/facebookinc…

Github.com/facebookinc…

The pull requests:

Github.com/storybooks/…

Github.com/facebookinc…

The following is a quick example of converting a relative import to an absolute import. First we create our files and folders.

Our AppContainer is used to load AppRoutes.

Notice how it uses relative imports. We need absolute path introduction.

  1. Create a ‘.** env **’ file in the root directory (same level as package.json)
  2. Set an environment variable, ‘NODE_PATH’ to ‘SRC/’

Now we can use absolute imports.

It works very well.

conclusion

Absolute imports can save you a lot of time and headaches because you don’t have to keep thinking about how many points you need when you import or change the location of a file. Thanks to create-React-app, setting up an environment that allows you to do this is simple.

I’m a developer who notes the new tools and concepts I come across and finds them interesting enough to share. Please click the button and/or leave a comment so I can write something more appropriate to your interests.