[Packager] Configure the locations from which modules can be imported

require() and import are really important features that deserve some love, IMO.

Forcing us to use relative paths in all our import/require statements is not ideal. It works only ok for the react demos that have a handful of files all in the root. For example, the Movie example in this repo:

The require on line 19 works because you’ve basically hardcoded require to search node_modules/ where react-native exists.

The require on line 26 forces you to put a ./ on the beginning of the path, and it works, but not ideally as I said.

Consider you want to actually break up this file: https://github.com/facebook/react-native/blob/master/Examples/Movies/SearchScreen.js

One file per component, even if they’re private (for now). Reusability is the goal, no?

If you move this file into a directory called “components/”, now you have to go and edit the require() statement to reflect the new path.

Things get really ugly if you want to organize your project into a more complex structure. Consider search/component1, search/component2, details/movie1, details/movie2, and so on. Now you’re relative paths, if they are sharing code, are …/search/whatever, …/details/whatever. Moving these files around to reorganize your project now means you have to deduce what the new relative paths must be and you have to edit all those files.

I suggest you think about implementing a robust require() implementation. I suggest at least the following features:

require.paths array

This is an array of search paths used by require. It searches the paths in the order of the array. It is allowed by the CommonJS require specification.

Example:

// In your index.ios.js at the very top:
require.paths.unshift('search');
require.paths.unshift('movies');

Now you can simply require('component1) ANYWHERE in your source code and search/component1 will be used. You can move your files around without having to edit your require() statements in every one. Just change the require.paths.

Support directories

If you require(‘foo’) and foo is a directory, you should:

1. Look for index.js and use that to locate the module requested.
2. THEN Look for package.json and use that to locate the module requested.
3. THEN look for bower.json and use that to locate the module requested.
4. THEN look for the module requested by filename (e.g. require(‘foo’).bar means foo/bar.js)

Benefits

If you implement these changes, people will be easily able to share components via mechanisms other than npm. You will easily be able to copy components from one project to another without having to refactor the require() statements in each.

Please consider this.

[dutzi]

A simple solution I found was creating a very minimalistic package.json inside the top-most folder you want to absolutely import from. That package.json should look like this: { "name": "src" }, where “src” is the name of that folder.

The you can simply do import X from 'src/X.js' just as you would normally do.

[marcshilling]

You can use an absolute path on imports/requires:

import {ProximaNovaText} from 'MyApp/src/components';
require('MyApp/src/utils/moment-twitter');

where ‘MyApp’ is whatever name you registered in your index.ios.js file