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

Question

我需要导入一个仅包含变量的文件，而我只需要 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 个不同的文件中重复这个完全相同的代码，所以我需要知道如何导入它以及如何在哪里调用它我需要它

Answer 1

您可以将所有这些内容放入一个导出每个变量的文件中，然后导入*以获取全部内容

库模块 从 '../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