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從根目錄導入

回答

相關問題