{"id":13526881,"url":"https://github.com/grassator/webpack-extract-translation-keys","last_synced_at":"2025-03-20T18:35:44.231Z","repository":{"id":1310501,"uuid":"42167616","full_name":"grassator/webpack-extract-translation-keys","owner":"grassator","description":"This plugin extracts translation keys for applications requiring runtime translations","archived":false,"fork":false,"pushed_at":"2024-07-14T12:10:34.000Z","size":234,"stargazers_count":38,"open_issues_count":1,"forks_count":15,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-02T18:51:40.814Z","etag":null,"topics":["i18n","l10n","runtime","translation","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grassator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2015-09-09T08:59:22.000Z","updated_at":"2025-01-08T04:44:45.000Z","dependencies_parsed_at":"2024-06-19T20:02:55.687Z","dependency_job_id":"f2c80a20-2021-4765-8aef-c5d2bdd4b06e","html_url":"https://github.com/grassator/webpack-extract-translation-keys","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Fwebpack-extract-translation-keys","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Fwebpack-extract-translation-keys/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Fwebpack-extract-translation-keys/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Fwebpack-extract-translation-keys/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grassator","download_url":"https://codeload.github.com/grassator/webpack-extract-translation-keys/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244671902,"owners_count":20491272,"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":["i18n","l10n","runtime","translation","webpack","webpack-plugin"],"created_at":"2024-08-01T06:01:36.638Z","updated_at":"2025-03-20T18:35:44.198Z","avatar_url":"https://github.com/grassator.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Webpack Extract Translation Keys Plugin\n\nWebpack provides an official plugin for managing translation using [i18n-webpack-plugin](https://github.com/webpack/i18n-webpack-plugin), but in only allows for build-time translations by replacing strings in the source code.\n\nThis plugin serves a similar purposes, but instead of replacing translation keys with actual string values it just collects translation keys allowing you to know exactly which translations are necessary for your client side.\n\nApproach like this also allows to provide dynamically generated translation bundles to the client allowing you to get real-time updates to translation without regenerating whole client side bundle.\n\nThis plugin also compatible with Webpack 5.\n\n## Usage\n\n### Configuration\n\nFirst you need to install plugin:\n\n```bash\nnpm install --save-dev webpack-extract-translation-keys-plugin\n```\n\nAnd then include it in your configuration:\n\n```javascript\n// webpack.config.js\n\nvar ExtractTranslationKeysPlugin = require('webpack-extract-translation-keys-plugin');\nmodule.exports = {\n    plugins: [\n        new ExtractTranslationKeysPlugin({\n            functionName: '_TR_',\n            output: path.join(__dirname, 'dist', 'translation-keys.json')\n        })\n    ]\n\n    // rest of your configuration...\n}\n```\n\nNow inside your module you can write something like this:\n\n```js\nconsole.log(_TR_('translation-key-1'));\nconsole.log(_TR_('translation-key-2'));\n```\n\nIf you run `webpack` now, you should get `dist/translation-keys.json` file with following content:\n\n```json\n{\n    \"translation-key-1\": \"translation-key-1\",\n    \"translation-key-2\": \"translation-key-2\"\n}\n```\n\nIt may seems like a waste to output a map with the keys and values being the same thing, the purpose is to keep the output format consistent with the times when the `mangle` option is enabled.\n\n## Output\n\nif output string contains [name], one output file will be created per entry key at corresponding output\n\n\n```js\n// ...\n    plugins: [\n        new ExtractTranslationKeysPlugin({\n            output: path.join(__dirname, 'dist', '[name]/translation-keys.json')\n        })\n    ]\n// ...\n```\n\n### Key Mangling\n\nIn some applications translation keys are quite long, so for the situtations where you want to save some additional bytes in your application, you can enable mangling during the plugin initialization:\n\n```js\n// ...\n    plugins: [\n        new ExtractTranslationKeysPlugin({\n            mangle: true,\n            functionName: '_TR_',\n            output: path.join(__dirname, 'dist', 'translation-keys.json')\n        })\n    ]\n// ...\n```\n\nThis setting changes the behavior of the plugin to replace the key name with a minimal ascii-readable string.\n\nIn order to be able to map back to the original translation key, the plugin outputs mapping object with keys being original keys and the values being the mangled ones:\n\n```json\n{ \"translation-key-1\": \" \", \"translation-key-2\": \"!\" }\n```\n\n\u003e It's recommended to only enable mangling for production builds, as it makes the debugging harder and also may break hot reloading, depending on your setup.\n\n### Runtime\n\nSince this plugin doesn't replace function with something else it's up to you to provide function that will actually handle translation in the runtime. It can be a globally defined function or you can use `webpack.ProvidePlugin` inside your configuration:\n\n```js\nmodule.exports = {\n    plugins: [\n        new ExtractTranslationKeysPlugin({\n            functionName: '__',\n            output: path.join(__dirname, 'dist', 'translation-keys.json')\n        }),\n        new webpack.ProvidePlugin({\n            '__': 'path/to/module/with/translation/function.js'\n        })\n    ]\n\n    // rest of your configuration...\n}\n```\n\n### Default options\n\n* `functionName` : `__`\n* `done` : `function (result) {}`\n* `output` : false\n* `mangle` : false\n\n### Error handling\n\nPlugin throw an error if you try to call the translation function without any arguments or with a non-string argument (e.g. a variable).\n\n## Release Notes\n\n### 6.2.0\n\nSupport concatenated strings as keys: `__(\"a\" + \"b\" + \"c\")`.\n\n### 6.1.0\n\nFix a deprecation warning.\n\n### 6.0.0\n\nSupport for Webpack 5, if you are using Webpack 4, please install 5.x.x version of this plugin. This can be done by running:\n\n```bash\nnpm install --save-dev webpack-extract-translation-keys-plugin@5\n```\n\n### 5.0.0\n\nSupport for multiple output for multiple entries with [name] inside the output string. If [name] is not present, only one output file will be created for all entries\n\n### 4.0.0\n\nSupport for Webpack 4, if you are using Webpack 3, please install 3.x.x version of this plugin. This can be done by running:\n\n```bash\nnpm install --save-dev webpack-extract-translation-keys-plugin@3\n```\n\n### 3.0.0\n\nSupport for Webpack 2, if you are using Webpack 1, please install 2.x.x version of this plugin. This can be done by running:\n\n```bash\nnpm install --save-dev webpack-extract-translation-keys-plugin@2\n```\n\n### 2.0.0\n\nSupport for key mangling. The format of the output without mangling has changed from array to a map. If you want to have old behavior, you can implement it using `done` callback option.\n\n## License\n\nCopyright 2015 Dmitriy Kubyshkin\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrassator%2Fwebpack-extract-translation-keys","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrassator%2Fwebpack-extract-translation-keys","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrassator%2Fwebpack-extract-translation-keys/lists"}