Javascript 如何使用 ES2015 语法导入从文件导出的所有内容?有通配符吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/35554526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 17:53:38  来源:igfitidea点击:

How to import everything exported from a file with ES2015 syntax? Is there a wildcard?

javascriptecmascript-6es6-module-loader

提问by mikl

With ES2015 syntax, we have the new import syntax, and I've been trying to figure out how to import everything exported from one file into another, without having it wrapped in an object, ie. available as if they were defined in the same file.

使用 ES2015 语法,我们有了新的导入语法,我一直在试图弄清楚如何将从一个文件导出的所有内容导入另一个文件,而无需将其包装在对象中,即。就好像它们在同一个文件中定义一样可用。

So, essentially, this:

所以,本质上,这个:

// constants.js

const MYAPP_BAR = 'bar'
const MYAPP_FOO = 'foo'
// reducers.js

import * from './constants'

console.log(MYAPP_FOO)

This does not work, at least according to my Babel/Webpack setup, this syntax is not valid.

这不起作用,至少根据我的 Babel/Webpack 设置,此语法无效。

Alternatives

备择方案

This works (but is long and annoying if you need more than a couple of things imported):

这有效(但如果您需要导入的东西不止几件,那会很长而且很烦人):

// reducers.js

import { MYAPP_BAR, MYAPP_FOO } from './constants'

console.log(MYAPP_FOO)

As does this (but it wraps the consts in an object):

这样做(但它将常量包装在一个对象中):

// reducers.js

import * as consts from './constants'

console.log(consts.MYAPP_FOO)

Is there a syntax for the first variant, or do you have to either import each thing by name, or use the wrapper object?

第一个变体是否有语法,或者您是否必须按名称导入每个事物,或使用包装器对象?

采纳答案by Felix Kling

Is there a syntax for the first variant,

第一个变体是否有语法,

No.

不。

or do you have to either import each thing by name, or use the wrapper object?

或者你必须按名称导入每个东西,还是使用包装器对象?

Yes.

是的。

回答by just-boris

You cannot import all variables by wildcard for the first variant because it causes clashing variables if you have it with the same name in different files.

您不能通过通配符为第一个变体导入所有变量,因为如果在不同文件中具有相同名称,则会导致变量冲突。

//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?

Because here we can't resolve the actual value of MY_VAR, this kind of import is not possible.

因为这里我们无法解析 的实际值MY_VAR,所以这种导入是不可能的。

For your case, if you have a lot of values to import, will be better to export them all as object:

对于您的情况,如果您有很多要导入的值,最好将它们全部导出为对象:

// reducers.js

import * as constants from './constants'

console.log(constants.MYAPP_FOO)

回答by user1966866

well you could import the object, iterate over its properties and then manually generate the constants with eval like this

好吧,您可以导入对象,迭代其属性,然后像这样使用 eval 手动生成常量

import constants from './constants.js'

for (const c in constants) {
  eval(`const ${c} = ${constants[c]}`)
}

unfortunately this solution doesn't work with intellisense in my IDE since the constants are generated dynamically during execution. But it should work in general.

不幸的是,此解决方案不适用于我的 IDE 中的智能感知,因为常量是在执行期间动态生成的。但它应该在一般情况下工作。

回答by Chenhua

In ES6, with below code, imported content can be used without wrap object.

在 ES6 中,使用下面的代码,可以在没有包装对象的情况下使用导入的内容。

Just put it here for someone like me who ends searching here.

把它放在这里给像我这样结束搜索的人。

constants.js:

常量.js:

export const A = 2;
export const B = 0.01; 
export const C = 0.04;

main.js:

主要.js:

import * as constants from './constants'
const {
    A,
    B,
    C,
} = constants;

回答by u4617295

Sure there are.

当然有。

Just use codegen.macro

只需使用 codegen.macro

codegen
      'const { ' + Object.keys(require('./path/to/file')).join(',') + '} = require("./path/to/file");

But it seems that you can't import variable generated by codegen. https://github.com/kentcdodds/babel-plugin-codegen/issues/10

但是好像不能导入codegen生成的变量。 https://github.com/kentcdodds/babel-plugin-codegen/issues/10