从根导入ES6

Question

我目前正在玩React Native。我正在尝试构建我的应用程序，但是它开始变得杂乱无章。

--app/
    -- /components
        -- Loading.js
    -- index.ios.js

现在，在我的index.ios.js能力范围内，我可以轻松做到：

import Loading from './components/Loading';

但是，当我开始创建更多具有更深目录结构的组件时，它开始变得混乱：

import Loading from '.../../../../components/Loading';

我知道首选的解决方案是为事情创建私有npm模块，但这对于一个小型项目来说是过大的。

您可以global.requireRoot在浏览器上执行类型解决方案，但是如何通过导入实现呢？

Answer 1

React也有同样的问题。因此，我为babel编写了一些插件，该插件可以从根的角度导入模块-路径并不短-但是很清楚导入的内容。

所以代替：

import 'foo' from '../../../components/foo.js';

您可以使用：

import 'foo' from '~/components/foo.js';

这是插件（经过测试并带有清晰的自述文件）