{"id":18521571,"url":"https://github.com/transferwise/webpack-translations-plugin","last_synced_at":"2025-04-09T09:33:15.404Z","repository":{"id":30492130,"uuid":"124045156","full_name":"transferwise/webpack-translations-plugin","owner":"transferwise","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-27T22:37:37.000Z","size":1406,"stargazers_count":5,"open_issues_count":27,"forks_count":2,"subscribers_count":104,"default_branch":"master","last_synced_at":"2025-03-24T04:43:23.463Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/transferwise.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-06T08:22:53.000Z","updated_at":"2023-04-26T15:50:41.000Z","dependencies_parsed_at":"2024-11-06T17:33:26.494Z","dependency_job_id":"fc529560-0c74-40ed-9a6d-4b20b9079e74","html_url":"https://github.com/transferwise/webpack-translations-plugin","commit_stats":{"total_commits":15,"total_committers":3,"mean_commits":5.0,"dds":0.4666666666666667,"last_synced_commit":"93d7086ff74ffdd1dfdb3ae020bad1664075ebea"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fwebpack-translations-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fwebpack-translations-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fwebpack-translations-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fwebpack-translations-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/transferwise","download_url":"https://codeload.github.com/transferwise/webpack-translations-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248012841,"owners_count":21033250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T17:26:35.222Z","updated_at":"2025-04-09T09:33:14.993Z","avatar_url":"https://github.com/transferwise.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :globe_with_meridians: Webpack Translations Plugin\n\n[![npm](https://img.shields.io/npm/v/webpack-translations-plugin.svg)](https://www.npmjs.com/package/webpack-translations-plugin)\n[![GitHub release](https://img.shields.io/github/release/transferwise/webpack-translations-plugin.svg)](https://github.com/transferwise/webpack-translations-plugin/releases)\n[![CircleCI](https://img.shields.io/circleci/project/github/transferwise/webpack-translations-plugin/master.svg)](https://circleci.com/gh/transferwise/webpack-translations-plugin)\n[![npm](https://img.shields.io/npm/l/webpack-translations-plugin.svg)](https://github.com/transferwise/webpack-translations-plugin/blob/master/LICENSE)\n\nThis is a [Webpack](https://webpack.js.org/) plugin that creates bundles for each of the existing translations files automatically, with reasonable defaults. [#0CJS](https://twitter.com/hashtag/0CJS?src=hash)\n\nUsing it enables only serving the translations the user needs, therefore increasing performance.\n\n## Usage\n\n### Installation\n\n`npm install --save-dev webpack-translations-plugin`\n\n### Webpack config\n\n```javascript\nimport WebpackTranslationsPlugin from 'webpack-translations-plugin';\n\nexport default {\n  ...,\n  plugins: [..., new WebpackTranslationsPlugin()]\n};\n```\n\n`WebpackTranslationsPlugin` takes an optional `options` object for configuration:\n\n| Option         | Description                                                                                      |          Default |\n|----------------|--------------------------------------------------------------------------------------------------|-----------------:|\n| `directory`    | containing translation JSONs                                                                     |   `translations` |\n| `fileNameBase` | for translation JSONs (source file name without the extension)                                   |       `messages` |\n| `moduleName`   | will resolve as the translations object                                                          |   `translations` |\n| `development`  | if `true`, will double escape the strings to work with webpack-dev-server                        |          `false` |\n\n### Source files\n\n```javascript\nimport translations from 'translations';\n\nconst languages = Object.keys(translations);\n\nif (languages.length === 1) {\n  // we only have one translation object\n  const language = languages[0];\n  console.log(translations[language]['a.translation.key']);\n} else {\n  // we have all translations objects, so f.e. we can do:\n  console.log(translations['en-US']['a.translation.key']);\n}\n```\n\n### File tree example\n\n#### With translation files\n\n```bash\n.\n├── node_modules\n├── translations\n│   ├── messages.json\n│   ├── messages.en.json\n│   ├── messages.en-US.json\n│   └── messages.it.json\n├── package.json\n└── webpack.config.js\n```\n\n* `options.directory` is `'translations'`\n* `options.fileNameBase` is `'messages'`\n* `options.moduleName` is `'translations'`\n\nAs these are all defaults, no `options` object needs to be passed.\n\nThis will produce the following:\n\n```bash\n.\n├── dist\n│   ├── main.js\n│   ├── main.en.js\n│   ├── main.en-US.js\n│   └── main.it.js\n├── node_modules\n├── translations\n│   ├── messages.json\n│   ├── messages.en.json\n│   ├── messages.en-US.json\n│   ├── messages.it.json\n├── package.json\n└── webpack.config.js\n```\n\nwhere `main.js` contain all the translations, so `'translations'` resolves as:\n\n```javascript\n{\n  \"en\": {\n    ...\n  },\n  \"en-US\": {\n    ...\n  },\n  \"it\": {\n    ...\n  }\n}\n```\n\nand `main.en.js`, `main.en-US.js` and `main.it.js` contain only the specific translations, so for `en-US` `'translations'` resolves as:\n\n```javascript\n{\n  \"en-US\": {\n    ...\n  }\n}\n```\n\n#### With only the source file\n\n```bash\n.\n├── node_modules\n├── translations\n│   └── messages.json\n├── package.json\n└── webpack.config.js\n```\n\nNo `options` object needs to be passed, as we're using the default values. The following will be built:\n\n```bash\n.\n├── dist\n│   └── main.js\n├── node_modules\n├── translations\n│   └── messages.json\n├── package.json\n└── webpack.config.js\n```\n\nwhere `main.js` contain the source translations, under the `\"source\"` key:\n\n```javascript\n{\n  \"source\": {\n    ...\n  }\n}\n```\n\n## Contributing\n\n1. Run tests with `npm run jest`. `npm test` will check for package and changelog version match, ESLint and Prettier format in addition.\n1. Develop.\n1. **Bump version number in `package.json` according to [semver](http://semver.org/) and add an item that a release will be based on to `CHANGELOG.md`**.\n1. Submit your pull request from a feature branch and get code reviewed.\n1. If the pull request is approved and the [CircleCI build](https://circleci.com/gh/transferwise/webpack-translations-plugin) passes, you will be able to squash and merge.\n1. Code will automatically be released to [GitHub](https://github.com/transferwise/webpack-translations-plugin/releases) and published to [npm](https://www.npmjs.com/package/webpack-translations-plugin) according to the version specified in the changelog and `package.json`.\n\n## Other\n\nFor features and bugs, feel free to [add issues](https://github.com/transferwise/webpack-translations-plugin/issues) or contribute.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransferwise%2Fwebpack-translations-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftransferwise%2Fwebpack-translations-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransferwise%2Fwebpack-translations-plugin/lists"}