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

如何有条件地加载语言相关的Javascript文件,javascript,es6-modules,Javascript,Es6 Modules,如何有条件地导出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 co

如何有条件地导出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个变量的正确方法取决于语言。

您是在块范围内声明变量的常量,它们不会影响模块范围内的变量。你需要使用

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!';

在导出中使用相同的名称可能在某个时候允许您在模块绑定器中使用特定于语言的名称替换dynamic text.js。

我以前没有处理过本地化问题,但我认为这不是正确的方法。你的.js永远是js。没有英语或法语版本的JavaScript。我相信本地化文件与JS文件是分开的,JS文件应用了正确的本地化文件。使用let定义变量,因为它们不是常数,每个变量只使用let一次,并确保window.loi_语言真的是Fri,您的问题中是否有拼写错误?从“/text.fr.js”导入{LOGIN_TITLE_fr,LOGIN_ERROR_fr};而不是从“/text.fr.js”导入{LOGIN_TITLE_ch,LOGIN_ERROR_ch};
// 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;