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

时间:2016-01-03 05:52:11

标签: javascript reactjs

我知道我们可以使用别名导入所有已命名的模块,如下所示

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中的第二个)

5 个答案:

答案 0 :(得分:22)

  

有没有办法导入所有命名的模块而没有别名,例如来自'./A'的import {*}(而不是B.js中的2nd)

没有

如你在

中所说的那样,重新导出超出你需要的整个想法需要保存最终js文件中的“行数”。
  

Bcz,它在最终的js文件中为每次导入放置了两行。考虑如果有10个导入行,则在最终的js中将添加20行。当你考虑生产时,它将花费太多

没有多大意义,因为那是JS minifiers的用途。

总结:一开始不应该这样做:

  1. export只需要导出
  2. import无论您需要什么,都可以import java.util.Arrays; public class InShuffle { public static void main(String[] args) { Integer[] nums = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 }; inShuffle(nums); System.out.println(Arrays.toString(nums)); } public static <T> void inShuffle(T[] array) { if (array == null) { return; } inShuffle(array, 0, array.length - 1); } private static <T> void inShuffle(T[] array, int startIndex, int endIndex) { while (endIndex - startIndex + 1 > 1) { int size = endIndex - startIndex + 1; int n = size / 2; int k = (int)Math.floor(Math.log(size + 1) / Math.log(3)); int m = (int)(Math.pow(3, k) - 1) / 2; rotateRight(array, startIndex + m, startIndex + n + m - 1, m); for (int i = 0, cycleStartIndex = 0; i < k; ++i, cycleStartIndex = cycleStartIndex * 3 + 2) { permuteCycle(array, startIndex, cycleStartIndex, 2 * m + 1); } endIndex = startIndex + 2 * n - 1; startIndex = startIndex + 2 * m; } } private static <T> void rotateRight(T[] array, int startIndex, int endIndex, int amount) { reverse(array, startIndex, endIndex - amount); reverse(array, endIndex - amount + 1, endIndex); reverse(array, startIndex, endIndex); } private static <T> void reverse(T[] array, int startIndex, int endIndex) { for (int leftIndex = startIndex, rightIndex = endIndex; leftIndex < rightIndex; ++leftIndex, --rightIndex) { swap(array, leftIndex, rightIndex); } } private static <T> void swap(T[] array, int index1, int index2) { T temp = array[index1]; array[index1] = array[index2]; array[index2] = temp; } private static <T> void permuteCycle(T[] array, int offset, int startIndex, int mod) { for (int i = ((2 * startIndex + 2) % mod) - 1; i != startIndex; i = ((2 * i + 2) % mod) - 1) { swap(array, offset + i, offset + startIndex); } } }
  3. 您使用JS minifiers来优化输出JS文件大小。

答案 1 :(得分:6)

这是我做过的一个疯狂的实验,虽然有效,但在我不完全理解的方面可能很危险。 有人会向我解释为什么我们不这样做?

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

它有点复杂,因为它在两个级别中进行了规避,但它基本上迭代了具有给定名称的对象的所有属性,并将具有限定名称的名称的所有属性绑定到该名称的标识符: / p>

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 {}

无论如何,无法抗拒尝试这一点;)

答案 2 :(得分:1)

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);

答案 3 :(得分:0)

就目前而言,没有干净的方法可以做到这一点。 但是,您可以通过以下方式解决问题:

1)定义别名

import * as foo from "foo"

2)编写所有模块

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

答案 4 :(得分:0)

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

要从util模块导入所有符号,请执行以下操作:

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语言的一部分,但现在还没有。但正如其他人所说,请谨慎使用。