React - translations per component

I'm using create-react-app for my React application and I'm currently trying to figure out translations.

Right now I have one big JSON file per locale and each locale file includes translations for all components - which is not ideal and I would like to have separate translation files for each component.

So the structure of locales will look like this:
ComponentA
- locales
- en.json
- sk.json

ComponentB
- locales
- en.json
- sk.json

What is the best way to achieve this? Which modules should I use to achieve this?

I do not want to include these locale files into build because we will support 10 languages so the bundle size will be too big.

asked Nov 15 '18 at 6:28

Palo Delinčák

1921210

github.com/i18next/react-i18next using i18next namepaces per component

– jamuhl
Nov 15 '18 at 11:51

@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.

– Palo Delinčák
Nov 18 '18 at 7:53

@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.

– Palo Delinčák
Nov 18 '18 at 7:59

add a comment |

I'm using create-react-app for my React application and I'm currently trying to figure out translations.

So the structure of locales will look like this:
ComponentA
- locales
- en.json
- sk.json

ComponentB
- locales
- en.json
- sk.json

What is the best way to achieve this? Which modules should I use to achieve this?

I do not want to include these locale files into build because we will support 10 languages so the bundle size will be too big.

asked Nov 15 '18 at 6:28

Palo Delinčák

1921210

github.com/i18next/react-i18next using i18next namepaces per component

– jamuhl
Nov 15 '18 at 11:51

@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.

– Palo Delinčák
Nov 18 '18 at 7:53

@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.

– Palo Delinčák
Nov 18 '18 at 7:59

add a comment |

I'm using create-react-app for my React application and I'm currently trying to figure out translations.

So the structure of locales will look like this:
ComponentA
- locales
- en.json
- sk.json

ComponentB
- locales
- en.json
- sk.json

What is the best way to achieve this? Which modules should I use to achieve this?

I do not want to include these locale files into build because we will support 10 languages so the bundle size will be too big.

asked Nov 15 '18 at 6:28

Palo Delinčák

1921210

I'm using create-react-app for my React application and I'm currently trying to figure out translations.

So the structure of locales will look like this:
ComponentA
- locales
- en.json
- sk.json

ComponentB
- locales
- en.json
- sk.json

What is the best way to achieve this? Which modules should I use to achieve this?

I do not want to include these locale files into build because we will support 10 languages so the bundle size will be too big.

reactjs internationalization translation create-react-app i18next

asked Nov 15 '18 at 6:28

Palo Delinčák

1921210

asked Nov 15 '18 at 6:28

Palo Delinčák

1921210

asked Nov 15 '18 at 6:28

Palo Delinčák

1921210

asked Nov 15 '18 at 6:28

Palo Delinčák

1921210

asked Nov 15 '18 at 6:28

Palo Delinčák

1921210

github.com/i18next/react-i18next using i18next namepaces per component

– jamuhl
Nov 15 '18 at 11:51

@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.

– Palo Delinčák
Nov 18 '18 at 7:53

@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.

– Palo Delinčák
Nov 18 '18 at 7:59

add a comment |

github.com/i18next/react-i18next using i18next namepaces per component

– jamuhl
Nov 15 '18 at 11:51

@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.

– Palo Delinčák
Nov 18 '18 at 7:53

@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.

– Palo Delinčák
Nov 18 '18 at 7:59

github.com/i18next/react-i18next using i18next namepaces per component

– jamuhl
Nov 15 '18 at 11:51

@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.

– Palo Delinčák
Nov 18 '18 at 7:53

@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.

– Palo Delinčák
Nov 18 '18 at 7:59

add a comment |

1 Answer
1

active

oldest

votes

I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.

I'm running default config of create-react-app together with react-i18next and my file structure looks like this:

src

  - Component A

    - locales

      - en.json

      - sk.json

  - Component B

    - locales

      - en.json

Here are settings for the react-i18next module:

i18n

  .use(Backend)

  .use('en')

  .use(reactI18nextModule)

  .init({

    fallbackLng: 'en',

    debug: false,

    backend: {

      loadPath: function() {

        return `${config.BASE_URL}locales/{{lng}}.json`;

      }

    },

    react: {

      wait: true

    }

  });

Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.

And now it gets tricky. Since the locale files are located in the component tree (and not in public folder) then we need to do some pre-processing of locales - basically we need to concat all JSON files and move them to the public folder.

Files for public folder are created on the fly using node task (prepare-locales.js) below:

const jsonConcat = require('json-concat');

const minifyJson = require('minify-json');

const glob = require('glob');

const availableLocales = ['en', 'sk'];

const path = require('path');



module.exports.development = function() {

  availableLocales.forEach(locale => {

    glob(`./src/**/locales/${locale}.json`, {}, (err, globFiles) => {

      if (globFiles.length) {

        const file = `./public/locales/${locale}.json`;



        jsonConcat(

          {

            src: globFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};



module.exports.production = function() {

  glob('./build/static/js/main.*.js', {}, (err, globFiles) => {

    const files = require('source-map-explorer')(globFiles[0]).files;



    let localeFolders = ;

    Object.keys(files).forEach(fileName => {

      localeFolders.push(path.dirname(fileName).replace('./', ''));

    });

    localeFolders = [...new Set(localeFolders)];



    availableLocales.forEach(locale => {

      const localeFiles = localeFolders.map(

        lf => `./src/${lf}/locales/${locale}.json`

      );



      if (localeFiles.length) {

        const file = `./build/locales/${locale}.json`;



        jsonConcat(

          {

            src: localeFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};

For the development version I'm concating all JSON files which are found in the tree.

For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.

Here is my simplified package.json with tasks required for this to work:

{

  "devDependencies": {    

    "json-concat": "0.0.1",

    "minify-json": "^1.0.0",

    "npm-watch": "^0.4.0",

    "path": "^0.12.7",

    "react-scripts": "2.1.1",

    "source-map-explorer": "^1.6.0"

  },

  "scripts": {    

    "start": "react-scripts start & npm run prepare-locales:development:watch",

    "build:production": "react-scripts build && npm run prepare-locales:production",    

    "prepare-locales:development:watch": "npm-watch prepare-locales:development",

    "prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",

    "prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"

  },

  "watch": {

    "prepare-locales:development": {

      "patterns": "src/**/locales/",

      "extensions": "json"

    }

  }  

}

Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.

answered Nov 22 '18 at 15:08

Palo Delinčák

1921210

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313624%2freact-translations-per-component%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.

I'm running default config of create-react-app together with react-i18next and my file structure looks like this:

src

  - Component A

    - locales

      - en.json

      - sk.json

  - Component B

    - locales

      - en.json

Here are settings for the react-i18next module:

i18n

  .use(Backend)

  .use('en')

  .use(reactI18nextModule)

  .init({

    fallbackLng: 'en',

    debug: false,

    backend: {

      loadPath: function() {

        return `${config.BASE_URL}locales/{{lng}}.json`;

      }

    },

    react: {

      wait: true

    }

  });

Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.

Files for public folder are created on the fly using node task (prepare-locales.js) below:

const jsonConcat = require('json-concat');

const minifyJson = require('minify-json');

const glob = require('glob');

const availableLocales = ['en', 'sk'];

const path = require('path');



module.exports.development = function() {

  availableLocales.forEach(locale => {

    glob(`./src/**/locales/${locale}.json`, {}, (err, globFiles) => {

      if (globFiles.length) {

        const file = `./public/locales/${locale}.json`;



        jsonConcat(

          {

            src: globFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};



module.exports.production = function() {

  glob('./build/static/js/main.*.js', {}, (err, globFiles) => {

    const files = require('source-map-explorer')(globFiles[0]).files;



    let localeFolders = ;

    Object.keys(files).forEach(fileName => {

      localeFolders.push(path.dirname(fileName).replace('./', ''));

    });

    localeFolders = [...new Set(localeFolders)];



    availableLocales.forEach(locale => {

      const localeFiles = localeFolders.map(

        lf => `./src/${lf}/locales/${locale}.json`

      );



      if (localeFiles.length) {

        const file = `./build/locales/${locale}.json`;



        jsonConcat(

          {

            src: localeFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};

For the development version I'm concating all JSON files which are found in the tree.

For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.

Here is my simplified package.json with tasks required for this to work:

{

  "devDependencies": {    

    "json-concat": "0.0.1",

    "minify-json": "^1.0.0",

    "npm-watch": "^0.4.0",

    "path": "^0.12.7",

    "react-scripts": "2.1.1",

    "source-map-explorer": "^1.6.0"

  },

  "scripts": {    

    "start": "react-scripts start & npm run prepare-locales:development:watch",

    "build:production": "react-scripts build && npm run prepare-locales:production",    

    "prepare-locales:development:watch": "npm-watch prepare-locales:development",

    "prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",

    "prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"

  },

  "watch": {

    "prepare-locales:development": {

      "patterns": "src/**/locales/",

      "extensions": "json"

    }

  }  

}

Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.

answered Nov 22 '18 at 15:08

Palo Delinčák

1921210

add a comment |

I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.

I'm running default config of create-react-app together with react-i18next and my file structure looks like this:

src

  - Component A

    - locales

      - en.json

      - sk.json

  - Component B

    - locales

      - en.json

Here are settings for the react-i18next module:

i18n

  .use(Backend)

  .use('en')

  .use(reactI18nextModule)

  .init({

    fallbackLng: 'en',

    debug: false,

    backend: {

      loadPath: function() {

        return `${config.BASE_URL}locales/{{lng}}.json`;

      }

    },

    react: {

      wait: true

    }

  });

Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.

Files for public folder are created on the fly using node task (prepare-locales.js) below:

const jsonConcat = require('json-concat');

const minifyJson = require('minify-json');

const glob = require('glob');

const availableLocales = ['en', 'sk'];

const path = require('path');



module.exports.development = function() {

  availableLocales.forEach(locale => {

    glob(`./src/**/locales/${locale}.json`, {}, (err, globFiles) => {

      if (globFiles.length) {

        const file = `./public/locales/${locale}.json`;



        jsonConcat(

          {

            src: globFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};



module.exports.production = function() {

  glob('./build/static/js/main.*.js', {}, (err, globFiles) => {

    const files = require('source-map-explorer')(globFiles[0]).files;



    let localeFolders = ;

    Object.keys(files).forEach(fileName => {

      localeFolders.push(path.dirname(fileName).replace('./', ''));

    });

    localeFolders = [...new Set(localeFolders)];



    availableLocales.forEach(locale => {

      const localeFiles = localeFolders.map(

        lf => `./src/${lf}/locales/${locale}.json`

      );



      if (localeFiles.length) {

        const file = `./build/locales/${locale}.json`;



        jsonConcat(

          {

            src: localeFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};

For the development version I'm concating all JSON files which are found in the tree.

For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.

Here is my simplified package.json with tasks required for this to work:

{

  "devDependencies": {    

    "json-concat": "0.0.1",

    "minify-json": "^1.0.0",

    "npm-watch": "^0.4.0",

    "path": "^0.12.7",

    "react-scripts": "2.1.1",

    "source-map-explorer": "^1.6.0"

  },

  "scripts": {    

    "start": "react-scripts start & npm run prepare-locales:development:watch",

    "build:production": "react-scripts build && npm run prepare-locales:production",    

    "prepare-locales:development:watch": "npm-watch prepare-locales:development",

    "prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",

    "prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"

  },

  "watch": {

    "prepare-locales:development": {

      "patterns": "src/**/locales/",

      "extensions": "json"

    }

  }  

}

Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.

answered Nov 22 '18 at 15:08

Palo Delinčák

1921210

add a comment |

I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.

I'm running default config of create-react-app together with react-i18next and my file structure looks like this:

src

  - Component A

    - locales

      - en.json

      - sk.json

  - Component B

    - locales

      - en.json

Here are settings for the react-i18next module:

i18n

  .use(Backend)

  .use('en')

  .use(reactI18nextModule)

  .init({

    fallbackLng: 'en',

    debug: false,

    backend: {

      loadPath: function() {

        return `${config.BASE_URL}locales/{{lng}}.json`;

      }

    },

    react: {

      wait: true

    }

  });

Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.

Files for public folder are created on the fly using node task (prepare-locales.js) below:

const jsonConcat = require('json-concat');

const minifyJson = require('minify-json');

const glob = require('glob');

const availableLocales = ['en', 'sk'];

const path = require('path');



module.exports.development = function() {

  availableLocales.forEach(locale => {

    glob(`./src/**/locales/${locale}.json`, {}, (err, globFiles) => {

      if (globFiles.length) {

        const file = `./public/locales/${locale}.json`;



        jsonConcat(

          {

            src: globFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};



module.exports.production = function() {

  glob('./build/static/js/main.*.js', {}, (err, globFiles) => {

    const files = require('source-map-explorer')(globFiles[0]).files;



    let localeFolders = ;

    Object.keys(files).forEach(fileName => {

      localeFolders.push(path.dirname(fileName).replace('./', ''));

    });

    localeFolders = [...new Set(localeFolders)];



    availableLocales.forEach(locale => {

      const localeFiles = localeFolders.map(

        lf => `./src/${lf}/locales/${locale}.json`

      );



      if (localeFiles.length) {

        const file = `./build/locales/${locale}.json`;



        jsonConcat(

          {

            src: localeFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};

For the development version I'm concating all JSON files which are found in the tree.

For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.

Here is my simplified package.json with tasks required for this to work:

{

  "devDependencies": {    

    "json-concat": "0.0.1",

    "minify-json": "^1.0.0",

    "npm-watch": "^0.4.0",

    "path": "^0.12.7",

    "react-scripts": "2.1.1",

    "source-map-explorer": "^1.6.0"

  },

  "scripts": {    

    "start": "react-scripts start & npm run prepare-locales:development:watch",

    "build:production": "react-scripts build && npm run prepare-locales:production",    

    "prepare-locales:development:watch": "npm-watch prepare-locales:development",

    "prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",

    "prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"

  },

  "watch": {

    "prepare-locales:development": {

      "patterns": "src/**/locales/",

      "extensions": "json"

    }

  }  

}

Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.

answered Nov 22 '18 at 15:08

Palo Delinčák

1921210

I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.

I'm running default config of create-react-app together with react-i18next and my file structure looks like this:

src

  - Component A

    - locales

      - en.json

      - sk.json

  - Component B

    - locales

      - en.json

Here are settings for the react-i18next module:

i18n

  .use(Backend)

  .use('en')

  .use(reactI18nextModule)

  .init({

    fallbackLng: 'en',

    debug: false,

    backend: {

      loadPath: function() {

        return `${config.BASE_URL}locales/{{lng}}.json`;

      }

    },

    react: {

      wait: true

    }

  });

Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.

Files for public folder are created on the fly using node task (prepare-locales.js) below:

const jsonConcat = require('json-concat');

const minifyJson = require('minify-json');

const glob = require('glob');

const availableLocales = ['en', 'sk'];

const path = require('path');



module.exports.development = function() {

  availableLocales.forEach(locale => {

    glob(`./src/**/locales/${locale}.json`, {}, (err, globFiles) => {

      if (globFiles.length) {

        const file = `./public/locales/${locale}.json`;



        jsonConcat(

          {

            src: globFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};



module.exports.production = function() {

  glob('./build/static/js/main.*.js', {}, (err, globFiles) => {

    const files = require('source-map-explorer')(globFiles[0]).files;



    let localeFolders = ;

    Object.keys(files).forEach(fileName => {

      localeFolders.push(path.dirname(fileName).replace('./', ''));

    });

    localeFolders = [...new Set(localeFolders)];



    availableLocales.forEach(locale => {

      const localeFiles = localeFolders.map(

        lf => `./src/${lf}/locales/${locale}.json`

      );



      if (localeFiles.length) {

        const file = `./build/locales/${locale}.json`;



        jsonConcat(

          {

            src: localeFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};

For the development version I'm concating all JSON files which are found in the tree.

For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.

Here is my simplified package.json with tasks required for this to work:

{

  "devDependencies": {    

    "json-concat": "0.0.1",

    "minify-json": "^1.0.0",

    "npm-watch": "^0.4.0",

    "path": "^0.12.7",

    "react-scripts": "2.1.1",

    "source-map-explorer": "^1.6.0"

  },

  "scripts": {    

    "start": "react-scripts start & npm run prepare-locales:development:watch",

    "build:production": "react-scripts build && npm run prepare-locales:production",    

    "prepare-locales:development:watch": "npm-watch prepare-locales:development",

    "prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",

    "prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"

  },

  "watch": {

    "prepare-locales:development": {

      "patterns": "src/**/locales/",

      "extensions": "json"

    }

  }  

}

Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.

src

  - Component A

    - locales

      - en.json

      - sk.json

  - Component B

    - locales

      - en.json

src

  - Component A

    - locales

      - en.json

      - sk.json

  - Component B

    - locales

      - en.json

i18n

  .use(Backend)

  .use('en')

  .use(reactI18nextModule)

  .init({

    fallbackLng: 'en',

    debug: false,

    backend: {

      loadPath: function() {

        return `${config.BASE_URL}locales/{{lng}}.json`;

      }

    },

    react: {

      wait: true

    }

  });

i18n

  .use(Backend)

  .use('en')

  .use(reactI18nextModule)

  .init({

    fallbackLng: 'en',

    debug: false,

    backend: {

      loadPath: function() {

        return `${config.BASE_URL}locales/{{lng}}.json`;

      }

    },

    react: {

      wait: true

    }

  });

const jsonConcat = require('json-concat');

const minifyJson = require('minify-json');

const glob = require('glob');

const availableLocales = ['en', 'sk'];

const path = require('path');



module.exports.development = function() {

  availableLocales.forEach(locale => {

    glob(`./src/**/locales/${locale}.json`, {}, (err, globFiles) => {

      if (globFiles.length) {

        const file = `./public/locales/${locale}.json`;



        jsonConcat(

          {

            src: globFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};



module.exports.production = function() {

  glob('./build/static/js/main.*.js', {}, (err, globFiles) => {

    const files = require('source-map-explorer')(globFiles[0]).files;



    let localeFolders = ;

    Object.keys(files).forEach(fileName => {

      localeFolders.push(path.dirname(fileName).replace('./', ''));

    });

    localeFolders = [...new Set(localeFolders)];



    availableLocales.forEach(locale => {

      const localeFiles = localeFolders.map(

        lf => `./src/${lf}/locales/${locale}.json`

      );



      if (localeFiles.length) {

        const file = `./build/locales/${locale}.json`;



        jsonConcat(

          {

            src: localeFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};

const jsonConcat = require('json-concat');

const minifyJson = require('minify-json');

const glob = require('glob');

const availableLocales = ['en', 'sk'];

const path = require('path');



module.exports.development = function() {

  availableLocales.forEach(locale => {

    glob(`./src/**/locales/${locale}.json`, {}, (err, globFiles) => {

      if (globFiles.length) {

        const file = `./public/locales/${locale}.json`;



        jsonConcat(

          {

            src: globFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};



module.exports.production = function() {

  glob('./build/static/js/main.*.js', {}, (err, globFiles) => {

    const files = require('source-map-explorer')(globFiles[0]).files;



    let localeFolders = ;

    Object.keys(files).forEach(fileName => {

      localeFolders.push(path.dirname(fileName).replace('./', ''));

    });

    localeFolders = [...new Set(localeFolders)];



    availableLocales.forEach(locale => {

      const localeFiles = localeFolders.map(

        lf => `./src/${lf}/locales/${locale}.json`

      );



      if (localeFiles.length) {

        const file = `./build/locales/${locale}.json`;



        jsonConcat(

          {

            src: localeFiles,

            dest: file

          },

          json => {

            minifyJson(file);

          }

        );

      }

    });

  });

};

{

  "devDependencies": {    

    "json-concat": "0.0.1",

    "minify-json": "^1.0.0",

    "npm-watch": "^0.4.0",

    "path": "^0.12.7",

    "react-scripts": "2.1.1",

    "source-map-explorer": "^1.6.0"

  },

  "scripts": {    

    "start": "react-scripts start & npm run prepare-locales:development:watch",

    "build:production": "react-scripts build && npm run prepare-locales:production",    

    "prepare-locales:development:watch": "npm-watch prepare-locales:development",

    "prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",

    "prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"

  },

  "watch": {

    "prepare-locales:development": {

      "patterns": "src/**/locales/",

      "extensions": "json"

    }

  }  

}

{

  "devDependencies": {    

    "json-concat": "0.0.1",

    "minify-json": "^1.0.0",

    "npm-watch": "^0.4.0",

    "path": "^0.12.7",

    "react-scripts": "2.1.1",

    "source-map-explorer": "^1.6.0"

  },

  "scripts": {    

    "start": "react-scripts start & npm run prepare-locales:development:watch",

    "build:production": "react-scripts build && npm run prepare-locales:production",    

    "prepare-locales:development:watch": "npm-watch prepare-locales:development",

    "prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",

    "prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"

  },

  "watch": {

    "prepare-locales:development": {

      "patterns": "src/**/locales/",

      "extensions": "json"

    }

  }  

}

answered Nov 22 '18 at 15:08

Palo Delinčák

1921210

answered Nov 22 '18 at 15:08

Palo Delinčák

1921210

answered Nov 22 '18 at 15:08

Palo Delinčák

1921210

answered Nov 22 '18 at 15:08

Palo Delinčák

1921210

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky