ES6从root导入 [英] ES6 import from root
问题描述
我正在玩React Native。我正在尝试构建我的应用程序,但它开始变得混乱进口。
I'm currently playing around with React Native. I'm trying to structure my app, however it's starting to get messy with imports.
--app/
-- /components
-- Loading.js
-- index.ios.js
现在,在我的 index.ios.js
中我可以做到:
Now, within my index.ios.js
i'm able to simply do:
import从'./components/Loading'加载;
然而,当我开始创建更多组件时,更深入目录struture,它开始变得混乱:
However, when I start to create more components, with a deeper directory struture, it starts to get messy:
import从'... / .. / .. / .. / components / Loading ';
我知道首选解决方案是为事物制作私有的npm模块,但这对于一个小项目来说太过分了。
I understand the preferred solution would be to make private npm modules for things, but that's overkill for a small project.
您可以在浏览器上执行 global.requireRoot
类型解决方案,但如何通过导入实现此功能?
You could do a global.requireRoot
type solution on the browser, but how do I implement this with import?
推荐答案
与React有同样的问题。
所以我为babel写了一些插件,它可以从root视角导入模块 - 路径不短 - 但是很清楚你导入的是什么。
Had the same issue with React. So i wrote some plugin for babel which make it possible to import the modules from the root perspective - the paths are not shorter - but it's clear what you import.
所以代替:
import 'foo' from '../../../components/foo.js';
您可以使用:
import 'foo' from '~/components/foo.js';
这篇关于ES6从root导入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!