ES6从根目录导入

我目前正在使用React Native。 我试图构build我的应用程序，但是它开始变得混乱的import。

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

现在，在我的index.ios.js我能够简单地做到：

import Loading from './components/Loading';

但是，当我开始创build更多的组件时，如果使用更深的目录结构，它会变得杂乱无章：

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

我知道首选的解决scheme是为事物制作私有的npm模块，但这对于一个小型项目来说太过分了。

你可以在浏览器上做一个global.requireRoottypes的解决scheme，但是如何在导入中实现呢？

Answer 1

与React有同样的问题。 所以我写了一些babel的插件，可以从根目录导入模块 – path并不短 – 但是很明显你导入了什么。

所以，而不是：

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

您可以使用：

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

这里是插件（testing和清晰的README）

Answer 2

如果您正在使用Webpack，则可以通过resolve属性对其进行configuration以parsing导入path。

Webpack 1

 resolve: { root: [ path.resolve(__dirname + '/src') ] }...... 

Webpack 2

 resolve: { modules: [ path.resolve(__dirname + '/src'), path.resolve(__dirname + '/node_modules') ] }..... 

之后，你可以使用

 import configureStore from "store/configureStore"; 

而不是：

 import configureStore from "../../store/configureStore"; 

Webpack将从传递的parsing参数中configuration你的导入path。

你可以用System.js加载器来做同样的事情，但是可以使用它自己的configuration参数（它可以是map或者path ，在System.js文档中查看）（如果你想使用的话，主要是针对Angular 2的情况但是我build议：即使使用ng2，也不要使用标准的System.js，Webpack要好得多）。

Answer 3

使用webpack，你也可以创buildpath，例如~parsing到根目录，所以你可以使用import Loading from '~/components/Loading'; ：

 resolve: { extensions: ['.js'], modules: [ 'node_modules', path.resolve(__dirname + '/app') ], alias: { ['~']: path.resolve(__dirname + '/app') } } 

诀窍是使用javascript括号语法来分配属性。

Answer 4

在Webpack 3中 ，configuration略有不同：

 import webpack from 'webpack'; import {resolve} from 'path'; 

…

 module: { loaders: [ { test: /\.js$/, use: ["babel-loader"] }, { test: /\.scss$|\.css$/, use: ["style-loader", "css-loader", "sass-loader"] } ] }, resolve: { extensions: [".js"], alias: { ["~"]: resolve(__dirname, "src") } },