Package Exports

@lomray/metro-custom-path-resolver

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lomray/metro-custom-path-resolver) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Metro Custom Path Resolver

.
└── src
├── assets
│   └── sample-icon.jpg
├── components
│   └── sample-component.js
├── custom-dir
│   ├── assets
│   │   └── sample-icon.jpg
│   └── components
│   └── sample-component.js
└── index.js

Content index.js:

import image from 'assets/sample-icon.jpg';
import { DemoComponent } from 'components/sample-component.js';

...

This module, resolve original sample-icon.jpg and sample-component.js from custom-dir, if they exist.

PS: For import an original module from resolved, use a relative path instead alias, in other cases, use aliases.

Installation & Usage

First, install the npm module.

npm install --save-dev @lomray/metro-custom-path-resolver

Next, enable hot reloading in your webpack config:

Import in metro.config.js:

const path               = require('path')
const fs                 = require('fs')
const CustomPathResolver = require('@lomray/metro-custom-path-resolver')

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp   = relativePath => path.resolve(appDirectory, relativePath)

Add the module to the resolve / plugins array:

module.exports = {
   resolver:    {
       resolveRequest: CustomPathResolver({
           excludePath: /(custom-dir|node_modules)/,
           rootPath:    resolveApp('src/'),
           projectPath: resolveApp(`src/custom-dir/`),
       })
   }
}

You're all set!