我目前正在通过webpack/babel在React应用程序中使用ES6.我正在使用索引文件来收集模块的所有组件并将其导出.不幸的是,这看起来像这样:
import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';
export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;
所以我可以很好地从其他地方导入它,如下所示:
import { Comp1, Comp2, Comp3 } from './components';
显然这不是一个非常好的解决方案,所以我想知道,如果有任何其他方式.我似乎无法直接导出导入的组件.
使用ES2015语法,我们有了新的导入语法,我一直在试图弄清楚如何将从一个文件导出的所有内容导入另一个文件,而不必将其包装在一个对象中,即.就好像它们是在同一个文件中定义的一样.
所以,基本上,这个:
// constants.js
const MYAPP_BAR = 'bar'
const MYAPP_FOO = 'foo'
// reducers.js
import * from './constants'
console.log(MYAPP_FOO)
这不起作用,至少根据我的Babel/Webpack设置,这种语法无效.
这样可行(但如果你需要输入的东西多于一些东西,那就很长而烦人):
// reducers.js
import { MYAPP_BAR, MYAPP_FOO } from './constants'
console.log(MYAPP_FOO)
就像这样(但它将对象包装在一个对象中):
// reducers.js
import * as consts from './constants'
console.log(consts.MYAPP_FOO)
是否有第一个变体的语法,或者您必须按名称导入每个东西,还是使用包装器对象？
我有变量app.js:
var G = {};
module.exports = G;
var DATA = G.DATA = 'DATA';
var F1 = G.F1?= function(val)
{
return val;
};
通过这种方式,我可以在对象下导出变量G,同时可以直接访问变量DATA而无需G.前缀.
到现在为止还挺好.
现在,我想运行一个测试了app.js在test.js:
var G = require('./app.js');
console.log(G.DATA); // -> DATA
这有效,但我也想直接写入DATA没有G.前缀的变量console.log(DATA); // -> DATA
当然,我可以做到
var DATA = G.DATA;对于每个变量(属性)导出和所需的模块G对象,但显然,手动将每个变量添加到测试文件以对应G对象是一个繁琐的过程.
有没有办法自动完成？
到目前为止,我从此感到悲观
JS function包含var在自己的范围内,因此理论上没有办法var为每个对象属性提供辅助函数.
谢谢.
PS.我想,以避免任何eval或 …