How to remove path from import filenames in react for NPM build

Question

I like to keep my files in organized folders in my project. For example, having an Auth folder for auth-related components, a Components folder for reusable components, a Profile folder for user profile-related components, etc.

Rather than having to either alias all of my folders whenever I create a new one, or have to reference the complete file path for all of my imports, I'd like to be able to declare something as simply as:

import MyComponent from 'MyComponent';

I imagine this can be done with some sort of pre-compile command to flatten the src directory structure into a new folder that just contains all of my files, but I don't know how to do that (or if there's a better method for doing so).

I'm also aware that this will likely mean my filenames need to be unique, which is not a problem for me.

I think you have to compile all your components in a `build.js` file with gulpjs or gruntjs or webpack — nazimboudeffa, Jul 23 '19 at 20:14
Check out https://stackoverflow.com/questions/50132624/how-to-add-import-shortcuts-alias — ffffff01, Jul 23 '19 at 20:17

score 2 · Answer 1 · answered Jul 24 '19 at 18:24

You can use Webpack's resolve.alias. https://webpack.js.org/configuration/resolve/

Create aliases to import or require certain modules more easily.

Example:

// webpack.config.js (or whatever)
module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

Now you could type e.g. import Foo from 'Utilities/Foo' and it would be as if you had typed the full path name of the module (src/utilities/Foo)

How to remove path from import filenames in react for NPM build

1 Answers1