javascript - 如何有条件地加载语言相关的 Javascript 文件

Question

如何有条件地导出2个变量？

这些是语言标志使用的 2 个 Javascript 文件。

// text.fr.js
export const LOGIN_TITLE_fr = {
    title: 'Hello!', 
};

export const LOGIN_ERROR_fr = {
    err_msg: 'Error!', 
};

// text.en.js
export const LOGIN_TITLE_en = {
    title: 'Hello!', 
};

export const LOGIN_ERROR_en = {
    err_msg: 'Error!', 
};

这是用于有条件导入然后导出 2 个变量的文件，该文件将由此处未列出的另一个文件使用。

1)情况1:

// text1.js
// No compiler error, but for 'fr', LOGIN_TITLE, LOGIN_ERROR are still en. Why?
import { LOGIN_TITLE_en, LOGIN_ERROR_en } from './text.en.js';
import { LOGIN_TITLE_ch, LOGIN_ERROR_ch } from './text.fr.js';

const LOGIN_TITLE = LOGIN_TITLE_en;
const LOGIN_ERROR = LOGIN_ERROR_en;

if (window.loi_language == 'fr') {
  const LOGIN_TITLE = LOGIN_TITLE_fr;
  const LOGIN_ERROR = LOGIN_ERROR_fr;
}


export {
  LOGIN_TITLE,
  LOGIN_ERROR
}

2)案例2

// text2.js
// Error when loading at last line!!! 
import { LOGIN_TITLE_en, LOGIN_ERROR_en } from './text.en.js';
import { LOGIN_TITLE_ch, LOGIN_ERROR_fr } from './text.fr.js';


if (window.loi_language == 'fr') {
  const LOGIN_TITLE = LOGIN_TITLE_fr;
  const LOGIN_ERROR = LOGIN_ERROR_fr;
} else {
  const LOGIN_TITLE = LOGIN_TITLE_en;
  const LOGIN_ERROR = LOGIN_ERROR_en;
}


export {
  LOGIN_TITLE,
  LOGIN_ERROR    // Error: not defined.
}

尝试了以上2种情况，均无效。想知道导出 2 个变量的正确方法是什么取决于语言。

Answer 1

您正在const - 声明 block 作用域内的变量，它们不会影响模块作用域中的变量。您需要使用

let LOGIN_TITLE = LOGIN_TITLE_en;
let LOGIN_ERROR = LOGIN_ERROR_en;

if (window.loi_language == 'fr') {
  LOGIN_TITLE = LOGIN_TITLE_fr;
  LOGIN_ERROR = LOGIN_ERROR_fr;
}

但是我建议简化为

// text.fr.js
export const LOGIN_TITLE = 'Bonjour!';
export const LOGIN_ERROR = 'Défaut!';

// text.en.js
export const LOGIN_TITLE = 'Hello!';
export const LOGIN_ERROR = 'Error!';

// text.js
import * as en from './text.en.js';
import * as fr from './text.fr.js';

const dict = window.loi_language == 'fr' ? fr : en;

export const LOGIN_TITLE = dict.LOGIN_TITLE;
export const LOGIN_ERROR = dict.LOGIN_ERROR;

对导出使用相同的名称可能会在某些时候允许您将动态 text.js 替换为模块 bundler 中特定于语言的名称。