nodejs和npm是很模組化(modular)的framework，經常需要import其他package和檔案，但隨著專案規模越來越大，一不小心就會進入relative import的地獄：

import { Something } from '../../../../../../../../../HelloWorld';

以下是這個情況的解決良方。

Import npm packages

一般的npm project長這樣：

.
├── src/
├── node_modules/
└── package.json

package.json define了需要哪些packages，npm install會安裝它們到node_modules/，然後就可以直接調用packages。

import { Something } from 'some-package';

Import local package

Relative import

例如一個project長這樣：

.
├── src/
│   └── components/
│       └── Button/
│           └── index.js
│   └── containers/
│       └── Home/
│           └── index.js
├── node_modules/
└── package.json

如果要從Home/index.js import Button/index.js就要：

import { SomeButton } from '../../components/Button';

當結構越來越複雜時，../../這些relative路徑會非常容易混淆、搞錯。

Absolute import

一般node projects

• 如果你的project有使用babel，可以嘗試babel-plugin-module-resolver。

• 如果你的project有使用webpack，可以嘗試Webpack alias。

React Native

新增package.json到directory，使其成為一個獨立package。

(有點像python的__init__.py)

.
├── src/
│   └── components/
│       ├── Button/
│       │   └── index.js
│       └── package.json
│   └── containers/
│       ├── Home/
│       │   └── index.js
│       └── package.json
├── node_modules/
└── package.json

components/package.json：

{
  "name": "@components"
}

此時node就會視components/為一個叫作@components的package，然後在任何地方都可以直接import：

import { SomeButton } from '@components/Button';