javascript - 解构导入语句

Question

在React项目中我发现了这段代码，这几乎是标准的:

import React from 'react';

import {
    ImageLeft,
    ImageRight,
    ImageBottom,
    ImageBanner    
} from './content';

const LAYOUT_COMPONENT = {   
    image_left: ImageLeft,
    image_right: ImageRight,
    image_bottom: ImageBottom,
    image_banner: ImageBanner    
};

LAYOUT_COMPONENT 对象有重复。是否可以通过 destructuring 以某种方式创建它from import 语句，以避免额外的代码？

Answer 1

不，有no destructuring in import statements .

你可以做的是

import * as contents from './content';

const LAYOUT_COMPONENT = {};
for (let p of ["Left", "Right", "Bottom", "Banner"])
    LAYOUT_COMPONENT["image_"+p.toLowerCase()] = contents["Image"+p];
}

但请注意，这将阻止模块 bundler 进行树抖动。