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,但是如何在导入中实现呢?

       

网上收集的解决方案 "ES6从根目录导入"

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

所以,而不是:

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

您可以使用:

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

这里是插件(testing和清晰的README)

如果您正在使用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要好得多)。

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

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

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

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