ES6从根目录导入

我目前正在使用React Native。我试图构建我的应用程序，但它开始变得混乱的进口。现在ES6从根目录导入

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

，我index.ios.js内我能够简单地做：

import Loading from './components/Loading';

然而，当我开始创建更多的组件，有了更深的目录结构，具有较好它开始变得混乱：

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

我理解的首选解决方案是让私人npm模块的东西，但这对于一个小项目来说太过分了。

你可以在浏览器上做一个global.requireRoot类型的解决方案，但是如何通过导入实现呢？

来源

2015-04-20 Alias

这似乎并不具有任何具体的反应或ES6做。 –

别名，你有没有找到这方面的解决方案？ – Tvaroh

我没有...我似乎发现的唯一答案是“更好地构建您的应用程序”，但它并不总是一种选择。我刚刚结束了使用要求.... – Alias

与React有同样的问题。所以我写了一些babel插件，可以从根角度导入模块 - 路径不会更短 - 但是很明显你导入了什么。

所以不是：

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

您可以使用：

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

Here is the Plugin (tested and with a clear README)

来源

2015-08-11 08:49:45

这很好用！谢谢。 – GollyJer

如果您正在使用的WebPack你可以通过决心将其配置属性来解决您的导入路径。

的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将通过传递的resolve参数来配置您的导入路径。

你可以System.js装载机，但用它做同样的东西就是自己的配置参数（这是可以地图或路径检查它的System.js文档）（如果你想用它这主要是针对Angular 2的情况，但我建议：即使使用ng2，也不要使用标准的System.js，Webpack要好得多）。

来源

2016-12-16 09:41:35 Velidan

它的工作原理，但我不能在我的测试文件夹中使用它。 – Nezih

用的WebPack还可以使路径开始例如~决心根，所以你可以使用import Loading from '~/components/Loading';：

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

诀窍是使用JavaScript括号语法来分配财产。

来源

2017-09-15 18:26:05

在的WebPack 3的配置稍有不同势：

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") 
    } 
},

来源

2017-11-03 15:12:01 keemor

ES6从根目录导入

回答

相关问题