如何有条件地加载语言相关 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个案例都试过了，none个成功了。想知道导出 2 个变量的正确方法取决于语言。

Answer 1

您正在 const- 声明块范围内的变量，它们不会影响模块范围内的变量。你需要使用

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。

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

How to conditionally load language dependent Javascript file

javascript

es6-modules