Javascript 如何使用ES2015语法导入从文件导出的所有内容?有通配符吗?
有了ES2015语法,我们有了新的导入语法,我一直在试图弄清楚如何将从一个文件导出的所有内容导入到另一个文件中,而不必将其包装在对象中,也就是说,就像它们在同一个文件中定义一样可用 因此,本质上,这是:Javascript 如何使用ES2015语法导入从文件导出的所有内容?有通配符吗?,javascript,ecmascript-6,es6-module-loader,Javascript,Ecmascript 6,Es6 Module Loader,有了ES2015语法,我们有了新的导入语法,我一直在试图弄清楚如何将从一个文件导出的所有内容导入到另一个文件中,而不必将其包装在对象中,也就是说,就像它们在同一个文件中定义一样可用 因此,本质上,这是: //constants.js 常量MYAPP_BAR='BAR' const MYAPP_FOO='FOO' 这不起作用,至少根据我的Babel/Webpack设置,此语法无效 选择 这是可行的(但如果您需要导入的东西不止两个,那么它会很长,很烦人): //reducers.js 从“./co
//constants.js
常量MYAPP_BAR='BAR'
const MYAPP_FOO='FOO'
这不起作用,至少根据我的Babel/Webpack设置,此语法无效
选择
这是可行的(但如果您需要导入的东西不止两个,那么它会很长,很烦人):
//reducers.js
从“./constants”导入{MYAPP_BAR,MYAPP_FOO}
console.log(MYAPP\u FOO)
与此类似(但它将常量包装在对象中):
//reducers.js
将*作为常量从“./常量”导入
console.log(consts.MYAPP\u FOO)
第一个变量是否有语法,或者是否必须按名称导入每个对象,或者使用包装器对象
第一个变体是否有语法
没有
或者您必须按名称导入每个对象,还是使用包装器对象
是。不能通过通配符为第一个变量导入所有变量,因为如果在不同的文件中有同名变量,则会导致变量冲突
//a.js
export const MY_VAR = 1;
//b.js
export const MY_VAR = 2;
//index.js
import * from './a.js';
import * from './b.js';
console.log(MY_VAR); // which value should be there?
因为这里我们无法解析MY_VAR
的实际值,所以这种导入是不可能的
对于您的情况,如果要导入很多值,最好将它们全部作为对象导出:
// reducers.js
import * as constants from './constants'
console.log(constants.MYAPP_FOO)
当然有
只需使用codegen.macro
codegen
'const { ' + Object.keys(require('./path/to/file')).join(',') + '} = require("./path/to/file");
但似乎无法导入由codegen生成的变量。
您可以导入对象,迭代其属性,然后像这样使用eval手动生成常量
import constants from './constants.js'
for (const c in constants) {
eval(`const ${c} = ${constants[c]}`)
}
不幸的是,这个解决方案不适用于我的IDE中的intellisense,因为常量是在执行期间动态生成的。在ES6中,使用下面的代码,导入的内容可以在没有包装对象的情况下使用 把它放在这里,给像我这样的人,在这里搜索结束 constants.js:
export const A = 2;
export const B = 0.01;
export const C = 0.04;
main.js:
import * as constants from './constants'
const {
A,
B,
C,
} = constants;
想象一下,
import*from
是可能的。如果reducers.js
包含变量MYAPP\u FOO
,会发生什么情况?或者如果另一个模块也包含MYAPP\u FOO
?还有很多要考虑的。这不是一个好主意。它的缺失无疑使静态分析更容易,因此可以说使用这种语法将是一种反模式。即便如此,它偶尔也会很方便。好吧,通配符导入在python中工作:对a.js
的引用被销毁,而b.js
被使用。为什么这在JS中不起作用?我认为这也很危险。假设您从一些第三方库导入*。LibA有一个你想要的foo
,而LibB没有任何foo
。几个月或几年后,LibB添加了一个foo
组件,该组件将关闭LibB的foo
。你的代码突然中断了。LibB可能甚至不认为添加<代码> FoO < /C>是一个重大的改变,因为它以前不存在。@席,因为你很可能无法控制<代码> .js<代码>或<代码> B.JS,所以你无法阻止名字冲突。特别是在将来,如@error所述。要详细说明一点,请参阅with
。这是从“/constants”导入{a,B,C}的较长版本。
import * as constants from './constants'
const {
A,
B,
C,
} = constants;