如何導入文件，如何調用它在那裏需要

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

您可以將所有這些每個變量exports，然後import *得到它的文件

Lib模塊 從'../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