es6-导入不带别名的所有命名模块

es6 - import all named module without alias

本文关键字：模块 导入 别名 es6-      更新时间：2023-09-26

我知道我们可以导入所有带有别名的命名模块，如下所示，

import * as name from "module-name";

参考编号：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

事实上，我已经在A.js中重新导出了我的模块，并且在B.js.PFB中继承了同样的模块。现在，它是两级继承，所以导入命名模块并不是什么大不了的事。但是，当我将其提升到5级继承（A->B->C->D->E）时，我需要导入所有文件中的所有命名模块，并需要在所有文件中进行（重新）导出。没有这么做

  • 是否有其他方法可以将所有命名模块的范围复制到所有级别而不重复轮子（导入和导出）
  • 这种设计的背后是为了让他们遵循Opps的概念，避免重新声明相同的模块

A.js

import React from 'react';
import I18n from 'i18n-js';
import m1 from 'module1';
import m2 from 'module2';
export default class A extends React.Component {}
export {React, I18n, m1, m2)

B.js

import BaseComponent from './A';
import {React, I18n, m1, m2) from './A;
export default class B extends A {}

有没有任何方法可以导入所有没有别名的命名模块，如import {*} from './A'（而不是B.js中的第二个）

JavaScript解决方案：

import * as exports from 'foo';
Object.entries(exports).forEach(([name, exported]) => window[name] = exported);

注意：导入的包装器对象仍保留在那里。

Node.js解决方案：

Object.entries(require('foo')).forEach(([name, exported]) => global[name] = exported);

是否有任何方法可以导入所有没有别名的命名模块，如从"导入｛*｝/A'（而不是B.js中的第二）

没有。

再出口的整个想法比你需要的更多，以节省"；行数"；在最后的js文件中，如您在中所述

因为，它在最终的js文件中为每个导入放了两行。考虑一下，如果有10行导入行，那么最终的js中将添加20行。当你考虑生产时，的成本太高了

没有多大意义，因为这就是JS迷你程序的用途。

总之：一开始就不应该这样做：

  1. 您仅export需要导出的内容
  2. 你import，无论你需要什么，无论你在哪里
  3. 您可以使用JS minifiers来优化输出JS文件的大小

global是node.js中您当前的作用域，类似于浏览器中的window对象，因此您可以导入到此对象中。

要从"util"导入所有符号：

import * as util from "./util";
Object.assign(global, util);

就是这样。

或者，在旧的JS:中

import * as util from "./util";
util.importAll(util, global);

在util.js:中

/**
 * Takes all functions/objects from |sourceScope|
 * and adds them to |targetScope|.
 */
function importAll(sourceScope, targetScope) {
  for (let name in sourceScope) {
    targetScope[name] = sourceScope[name];
  }
}

以及许多其他函数，如assert()等，我到处都需要它们，它们应该是JavaScript语言的一部分，但现在还没有。但正如其他人所说，要谨慎使用。

这是我做的一个疯狂的实验，它有效，但在我不完全理解的方面可能很危险。有人能向我解释一下我们为什么不这样做吗？

var lodash = require("lodash");
function $localizeAll(name) {
    return `eval("var " + Object.getOwnPropertyNames(${name}).reduce((code, prop)=>{
        if (/^[a-zA-Z$_][a-zA-Z$_0-9]*$/.test(prop)) {
            return code.concat('`'${prop} = ${name}["'${prop}"]'n'`);
        } else {
            console.warn("did not import '" + prop + "'");
            return code;
        }
    }, []).join(", ")+";")`
}
// this will make all exports from lodash available
eval($localizeAll("lodash"));
console.log(add(indexOf([1,2,6,7,12], 6), 5)); // => 7

它有点复杂，因为它分为两个级别进行评估，但它基本上迭代范围中具有给定名称的对象的所有属性，并将所有名称符合标识符条件的属性绑定到该名称的标识符：

var length = lodash["length"]
  , name = lodash["name"]
  , arguments = lodash["arguments"]
  , caller = lodash["caller"]
  , prototype = lodash["prototype"]
  , templateSettings = lodash["templateSettings"]
  , after = lodash["after"]
  , ary = lodash["ary"]
  , assign = lodash["assign"]
  , assignIn = lodash["assignIn"]
  , assignInWith = lodash["assignInWith"]
  , assignWith = lodash["assignWith"]
  , at = lodash["at"]
  , before = lodash["before"]
  , bind = lodash["bind"]
  , bindAll = lodash["bindAll"]
  , bindKey = lodash["bindKey"]
  //...
  , upperCase = lodash["upperCase"]
  , upperFirst = lodash["upperFirst"]
  , each = lodash["each"]
  , eachRight = lodash["eachRight"]
  , first = lodash["first"]
  , VERSION = lodash["VERSION"]
  , _ = lodash["_"]
  ;

这个列表中有一些例子说明了为什么这是一个坏主意（例如，它掩盖了arguments）。

你应该能够按照如下方式使用它（尽管你可能不应该喜欢上面说的）。

B.js

import BaseComponent, * as extras from './A';
eval($localizeAll("extras"));
export default class B extends BaseComponent {}

无论如何，我忍不住尝试了一下；）

目前，没有干净的方法可以做到这一点。但你可以通过以下方式克服这个问题：

1） 定义别名

import * as foo from "foo"

2） 写入所有模块

import {a,b,c,d,...} from "foo"

可以进行这样的通配符导入：


import * as library from "./library.js"
Object.assign(globalThis, library)  // -> expose all exports to the global Namespace
相关文章：