JavaScript（ReactJS WebApp）の条件付きインポートまたは代替？

Question

私はReactJS Webアプリケーションの国際化を実装しています。 すべての言語ファイルの読み込みを避けるにはどうすればよいですか？

import ru from './ru'; 
import en from './en'; 

// next lines are not important for this question from here 
import locale from 'locale'; 
const supported = new locale.Locales(["en", "ru"]) 

let language = 'ru'; 

const acceptableLanguages = { 
    ru: ru, 
    en: en, 
} 
if (typeof window !== 'undefined') { 
    const browserLanguage = window.navigator.userLanguage || window.navigator.language; 
    const locales = new locale.Locales(browserLanguage) 
    language = locales.best(supported).code 
} 

// till here 

// and here i'm returning a static object, containing all language variables 
const chooseLang =() => { 
    return acceptableLanguages[language]; 
} 
const lang = chooseLang(); 

export default lang; 

Answer 1

残念ながら、ES6でモジュールを動的にロードする方法はありません。

この機能を使用できるようになるHTML Loader Specがあります。そのためには、a polyfillを使用してください。

import language from "./language"; 
language.chooseLang().then(l => { 
    console.log(l); 
}); 

しかし、クマ心の中で、そのスペックは根本的に変えることができる（または完全に廃棄される）：

const chooseLang =() => System.import(`./${language}`); 
export default chooseLang; 

しかし、これは今、約束に基づくことが必要となるので、そうのように呼ばれるようになります。

また、ローカライズをJavascriptモジュールとして保存するのではなく、代わりにJSONとして保存することもできます。

en.json

{ "hello_string": "Hi!" } 

language.js

const chooseLang =() => { 
    return fetch(`./${language}.json`) 
     .then(response => response.json()); 
}; 

再び、これはそうようにアクセスする必要がベース約定であろう：

import language from "./language"; 
language.chooseLang().then(l => { 
    console.log(l.hello_string); 
}); 

その解決策はf ES6に準拠しており、将来の可能性のある機能に依存しません。

Answer 2

私はここに遅れているように見えますが、私が使っているアプローチにお答えしたいと思います。私は、非同期コンポーネントがあります。

import React from 'react'; 

export default (loader, collection) => (
    class AsyncComponent extends React.Component { 
    constructor(props) { 
     super(props); 
     this.Component = null; 
     this.state = { Component: AsyncComponent.Component }; 
    } 

    componentWillMount() { 
     if (!this.state.Component) { 
     loader().then((Component) => { 
      AsyncComponent.Component = Component; 
      this.setState({ Component }); 

     }); 
     } 
    } 

    render() { 
     if (this.state.Component) { 
     return (
      <this.state.Component { ...this.props } { ...collection } /> 
     ) 
     } 

     return null; 
    } 
    } 
); 

をそして、我々は使用してそれを呼び出す：これは読み込みが動的に行われることを保証します

<Route path='/page1' component= {page1}/> 

：我々がそれを使用し、その後

const page1 = asyncComponent(() => import('./page1') 
    .then(module => module.default), { name: 'page1' }); 

をして。