如何导入文件以及如何在需要的地方调用它答案

【问题标题】：How to import a file and how to call it where need it如何导入文件以及如何在需要的地方调用它
【发布时间】：2015-11-30 16:53:44
【问题描述】：

我需要导入一个只包含变量的文件，而我只需要 svgs，

// THESE ARE THE SVGS I NEED 
import doubleSvg from '../DecisionOverlay/img/button-double.svg';
import hitSvg from '../DecisionOverlay/img/button-hit.svg';
import splitSvg from '../DecisionOverlay/img/button-split.svg';
import standSvg from '../DecisionOverlay/img/button-stand.svg';

const standSymbolSvg = document.getElementById('stand-symbolSvg');
const hitSymbolSvg = document.getElementById('hit-symbolSvg');
const doubleSymbolSvg = document.getElementById('double-symbolSvg');
const splitSymbolSvg = document.getElementById('split-symbolSvg');

const standSymbolSnap = snap(standSymbolSvg);
const hitSymbolSnap = snap(hitSymbolSvg);
const doubleSymbolSnap = snap(doubleSymbolSvg);
const splitSymbolSnap = snap(splitSymbolSvg);

const standSymbolSvgContent = Snap.parse(standSvg.content);
const hitSymbolSvgContent = Snap.parse(hitSvg.content);
const doubleSymbolSvgContent = Snap.parse(doubleSvg.content);
const splitSymbolSvgContent = Snap.parse(splitSvg.content);

standSymbolSnap.append(standSymbolSvgContent);
hitSymbolSnap.append(hitSymbolSvgContent);
doubleSymbolSnap.append(doubleSymbolSvgContent);
splitSymbolSnap.append(splitSymbolSvgContent);

所以，我需要一个可以导入的模块，所以我不会重复我的代码，因为我在 4 个不同的文件中重复了完全相同的代码，所以我需要知道如何导入它以及如何在哪里调用它我需要它

【问题讨论】：

所以，把它放在一个模块中并在需要的地方导入它。不确定是什么问题。您似乎已经知道如何导入模块了。

标签： javascript reactjs ecmascript-6

【解决方案1】：

您可以将所有这些都放在一个文件中，exports 每个变量，然后import * 得到所有这些

库模块从'../DecisionOverlay/img/button-double.svg'导入doubleSvg；从'../DecisionOverlay/img/button-hit.svg'导入hitSvg；从'../DecisionOverlay/img/button-split.svg'导入splitSvg；从'../DecisionOverlay/img/button-stand.svg'导入standSvg；

export const standSymbolSvg = document.getElementById('stand-symbolSvg');
export const hitSymbolSvg = document.getElementById('hit-symbolSvg');
export const doubleSymbolSvg = document.getElementById('double-symbolSvg');
export const splitSymbolSvg = document.getElementById('split-symbolSvg');

const standSymbolSnap = snap(standSymbolSvg);
const hitSymbolSnap = snap(hitSymbolSvg);
const doubleSymbolSnap = snap(doubleSymbolSvg);
const splitSymbolSnap = snap(splitSymbolSvg);

export const standSymbolSvgContent = Snap.parse(standSvg.content);
export const hitSymbolSvgContent = Snap.parse(hitSvg.content);
export const doubleSymbolSvgContent = Snap.parse(doubleSvg.content);
export const splitSymbolSvgContent = Snap.parse(splitSvg.content);

standSymbolSnap.append(standSymbolSvgContent);
hitSymbolSnap.append(hitSymbolSvgContent);
standSymbolSnap.append(doubleSymbolSvgContent);
splitSymbolSnap.append(splitSymbolSvgContent);

export standSymbolSnap;
export hitSymbolSnap;
export splitSymbolSnap;

其他一些模块

import * as lib from 'lib';
//lib.standSymbolSnap is accessible

【讨论】：