ES6 импорт из корня

Question

Я сейчас играю с React Native. Я пытаюсь структурировать свое приложение, но оно начинает запутываться с импортом.

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

Теперь в моем index.ios.js я в состоянии просто сделать:

import Loading from './components/Loading';

Однако, когда я начинаю создавать больше компонентов, с более глубоким каталога Struture, он начинает запутаться :

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

Я понимаю, что предпочтительным решением было бы сделать частный npm для вещей, но это слишком много для небольшого проекта.

В браузере вы можете использовать решение типа global.requireRoot, но как это реализовать при импорте?

Answer 1

Имел ту же проблему с реакцией. Итак, я написал некоторый плагин для babel, который позволяет импортировать модули с корневой перспективы - пути не короче - но ясно, что вы импортируете.

Таким образом, вместо:

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

Вы можете использовать:

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

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

Answer 2

Если вы используете 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 настроит ваш путь импорта из переданного параметра разрешения.

Тот же материал, что вы можете сделать с System.js грузчиком, но с его собственной конфигурацией пары (это может быть карты или пути. Проверьте это в документации System.js) (если вы хотите использовать его Это в основном для случая с угловым 2. Но я предлагаю: не используйте стандартные System.js, даже если вы работаете с ng2. Webpack намного лучше).

Answer 3

С WebPack вы также можете сделать пути, начиная с, например ~ решимостью к корню, так что вы можете использовать import Loading from '~/components/Loading';:

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

Уловка с помощью яваскрипта синтаксиса брекет присвоить свойство.

Answer 4

В Webpack 3 конфиге немного diffrent:

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