Importazione ES6 dalla radice

Question

Attualmente sto giocando con React Native. Sto provando a strutturare la mia app, tuttavia sta iniziando a complicarsi con le importazioni.

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

Ora, nel mio index.ios.js io sono in grado di fare semplicemente:

import Loading from './components/Loading';

Tuttavia, quando inizio a creare più componenti, con una più profonda struture directory, comincia a diventare disordinato :

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

capisco la soluzione preferita sarebbe quella di rendere privato moduli npm per le cose, ma è eccessivo per un piccolo progetto.

È possibile eseguire una soluzione di tipo global.requireRoot nel browser, ma come posso implementarla con l'importazione?

Answer 1

Aveva lo stesso problema con React. Così ho scritto alcuni plugin per babel che rendono possibile importare i moduli dal punto di vista della radice - i percorsi non sono più brevi - ma è chiaro cosa importa.

Così, invece di:

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

È possibile utilizzare:

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

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

Answer 2

Se si utilizza Webpack è possibile configurarlo tramite il volontà proprietà per risolvere una tua percorso di importazione.

Webpack 1

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

Webpack 2

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

Dopo di che è possibile utilizzare

import configureStore from "store/configureStore"; 

al posto del:

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

Webpack configura il percorso di importazione dal parametro di risoluzione passato.

Le stesse cose che puoi fare con System.js loader, ma con il proprio config param (è può essere mappa o percorso. Controllare che nella documentazione System.js) (se si desidera usarlo Si tratta principalmente di un caso Angular 2. Ma suggerisco: non utilizzare System.js standard anche se si sta lavorando con ng2. Webpack è molto meglio).

Answer 3

Con webpack è anche possibile effettuare percorsi a partire per esempio ~ risolvere alla radice, in modo da poter utilizzare import Loading from '~/components/Loading';:

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

Il trucco sta usando la sintassi staffa javascript per assegnare la proprietà.

Answer 4

In Webpack 3 la configurazione è leggermente differente:

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