react/react-domでもbabel-pluginを使えば可能だと思うがreact-nativeだと
/**
* @providesModule 🔑Login
*/
とファイルの先頭に書くだけでOK。
@providesModuleの利点
// こういう相対パスが長い、モジュールの読み込みが
import baz from '../../../src/foo/bar/baz'
// こうなる
import baz from 'baz'
目下react-native限定で、ほぼほぼundocumented
- metro-bundlerが提供してる機能なため
- react-nativeがbundlerとして使ってるもの
- facebook/metro-bundler: 🚇 The JavaScript bundler for React Native.
Documentやリリースノートでも触れられているが・・・・
If you've added a new module, add a @providesModule at the end of the comment. This will allow the haste package manager to find it.
- How to Contribute - React Native
- react-native本体へのcontributeガイドでの言及のみ
- コンポーネントを追加するPull Requestを作る場合は、metro-bundlerが検出できるようにするべし、と
- 以前はリリースノートで
@providesModuleの機能について言及されてた-
@providesから、@providesModuleへの変更など - ...If you were using @provides NameOfModule, you should now switch to @providesModule
- 別パッケージ化されて以降は、リリース情報がゼロ
-
エディタでも入力候補に出せるようにできる
- vscodeだとそれ用のプラグインがある@providesModule Intellisense - Visual Studio Marketplace
挙動などその他
- 'haste module`
-
@providesModule使ったモジュールを呼び名
-
- 名前はproject内部でユニークでないとダメ
- 衝突するとエラーがスローされる
-
lodash,momentなどnpmモジュールと同じ名前を@providesModuleで使ってしまうと、haste moduleが優先的に読み込まれるのが仕様、らしい
babelでも同じことができる
babel-plugin-module-resolver を使えばできるが、１つずつパターンを列挙していく必要がある
{
"plugins": [
[
"module-alias",
[
{ "src": "./src", "expose": "src" },
{ "src": "./src/foo/bar/blah/blah/baz", "expose": "bazu" },
{ "src": "./app", "expose": "app" },
{ "src": "./app/resources/icon", "expose": "icon" }
]
]
]
}
- globパターンは使えるが、まあまあ手間