{"id":15689785,"url":"https://github.com/oklas/intl-webpack-plugin","last_synced_at":"2025-05-07T23:08:29.998Z","repository":{"id":57275406,"uuid":"86096963","full_name":"oklas/intl-webpack-plugin","owner":"oklas","description":":earth_americas: Webpack plugin for component approach to internationalization","archived":false,"fork":false,"pushed_at":"2017-08-01T17:32:29.000Z","size":18,"stargazers_count":8,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T23:08:24.475Z","etag":null,"topics":["component","i18n","internationalization","intl","join","loader","locale","localization","merge","plugin","webpack"],"latest_commit_sha":null,"homepage":"","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/oklas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-24T18:03:39.000Z","updated_at":"2018-12-01T13:11:49.000Z","dependencies_parsed_at":"2022-09-16T09:50:46.983Z","dependency_job_id":null,"html_url":"https://github.com/oklas/intl-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oklas%2Fintl-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oklas%2Fintl-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oklas%2Fintl-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oklas%2Fintl-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oklas","download_url":"https://codeload.github.com/oklas/intl-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252968118,"owners_count":21833251,"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":["component","i18n","internationalization","intl","join","loader","locale","localization","merge","plugin","webpack"],"created_at":"2024-10-03T18:04:32.071Z","updated_at":"2025-05-07T23:08:29.970Z","avatar_url":"https://github.com/oklas.png","language":"JavaScript","readme":"[![npm][npm-image]][npm-url]\n[![travis-cl][travis-image]][travis-url]\n[![coverage][cover-image]][cover-url]\n\n# Internationalization Plugin for Webpack\n\n\n- [Install](#install)\n- [Webpack configuration](#webpack-configuration)\n- [Requiring](#requiring-and-library)\n- [Building libraries](#building-libraries)\n- [Plugin configuration](#plugin-configuration)\n- [Loader configuration](#loader-configuration)\n- [Grouping](#grouping)\n\n\n**Webpack plugin with loader for build locales according to\n[component approach](https://github.com/oklas/component-intl)**\n\nThis is **[webpack](https://webpack.js.org/)** plugin designed to build\nlocale assets. Advantages to use:\n\n* **component approach** - merge locales from different application\n  volumes or its components or from external libraries\n* **acceleration** - minimize download time and amount of traffic\n  by loading only the required locale\n* **configuration flexibility** - locales sources may be described by the\n  list of `require/import` in the js source (due to deep webpack integration)\n  or as simple glob path pattern in the wepback configuration file\n* **developing flexibility** - immediately locale change updatetion in the\n  application under webpack dev server (due to deep webpack integration)\n* **make structure flatten** - make struct entries keys flatten (if needed)\n  for easier to use the branch path as a string key\n\nThis is locale data build tool and it is independent from internationalization\nlibrary or framework which may be react-intl or i18n-js or yui-intl\nor angular-dynamic-locale or any your favorite internationalization system.\nA link to a running\n\n* [demonstration application](https://oklas.github.io/component-intl-example/).\n\n\n## Install\n\n```bash\nnpm install --save intl-webpack-plugin\n```\n\n\n## Webpack configuration\n\nThis example is minimal configuration to merge json to single asset:\n\n``` javascript\n  module: {\n    rules: [\n      { test: /\\.(intl|i18n|yml|yaml)$/i,\n        use: [\n          IntlPlugin.loader(),\n          'yaml-loader'\n        ]\n      },\n    ]\n  },\n  plugins: [\n    new IntlPlugin({\n      search: [ './src/**/*.intl' ]\n    })\n```\n\n\n## Requiring\n\nThe name of file is locale identificator but this may be changed to\nfile extestion by configure using\n[grouping technique](https://github.com/oklas/join-webpack-plugin#grouping)\n\nIn order to require the builded locale asset need at least one file which\nname matches name of locale. To change this, it is need to configure the\nwebpack module loading rules and grouping technique as need.\n\nThe locale file may be empty (or an empty hash for json format) because\nactually loaded asset will be populated with other joined sources of\ncurrent locale.\n\n\n``` javascript\nimport en from 'en.intl'\nimport de from 'de.intl'\nimport fr from 'fr.intl'\n...\n```\n\nThese imported variables contain public urls of assets with locale assembly.\n\nIn order to involve files into locale assebly, files must be required by `require`\nfunction or `import` somewhere in code or described by pattern in `search`\nparam of plugin configuration.\n\nRefer to\n[demonstration application](https://github.com/oklas/component-intl-example)\nwith internationalization for more details about how to configure application\nand how to import library with support internationalization.\n\n\n## Building libraries\n\nThis section is for component library developers.\n\nRefer to the\n[demonstration component library](https://github.com/oklas/component-intl-welcome)\nexample which demonstrates how to create library with support of\ninternationalization and documentation how to integrate it in application.\n\nTo join locales from library package to application locale assets need to:\n\n* describe in documentation locale structure organization and format to load,\n  and enumerate supported locales - this required to configure this webpack\n  plugin with loaders\n* export file which each locale file is required by calling `require` function\n  or by `import`, describe how to require it in code\n* and/or another way is to describe path pattern to locale files and how to\n  configure plugin to search and prefetch\n\nSo application developers may identify how to integrate location assets to\napplication and choose way how to configure plugin to join library package\nlocales with application locales. More about format and structure organization\ndescribed in **[component approach](https://github.com/oklas/component-intl)**\n\nLibrary package locales may be joined by define pattern in `search` plugin\noption or by importing module from library in which library locales enumerated\nby calling `require` function or `import`.\n\n\n## Plugin configuration\n\nIntlPlugin typically created at the webpack configuration file and\nwaits hash of configuration options as its creation param:\n\n``` javascript\nvar IntlPlugin = require(\"intl-webpack-plugin\");\n\nvar intlPlugin = new IntlPlugin({\n  search: 'glob' || ['globs',...],\n  skip: 'substr' || /regexp/ || [ 'substr', /regex/, ...],\n  flattenLowness: 1,\n  flattenDepth: 2,\n  ...loaderOptions\n});\n```\n\nOptions:\n\n* `search` - glob pattern or pattern array to find and prefetch\n  see [glob](https://www.npmjs.com/package/glob) module for reference\n* `skip` - substring or regular expression or array to skip some from\n  the searched results\n* `flattenLowness` - the level from which struct will be flatten.\n  The default value of `flattenLowness` is **1** which reserved for top level\n  key locale name, and any another purpose if it does not intersect with\n  the names of locales.\n* `flattenDepth` - flattenization depth level. The default value `flattenDepth`\n  is not defined which mean depth does not limited and works through the depth,\n  to disable flattenization specify value **1** on `flattenDepth`\n* `group` - the default `group` loader option, the default value is '[name]'\n  to join in groups by file name which is equal to the name of the locale\n* `name` - default `name` loader option (define pattern for asset file name)\n\nThe `search` param is like multi-require with glob patterns.\nOnly files that required by `require` function in code\nwill be loaded in that case.\n\nAny file that do not match to `search` or `skip` param and\nmatch to loader section in webpack config and is required in code\nby function `require` or `import` will be loaded and merged anyway.\n\n\n## Loader configuration\n\nThe `loader()` method includes intl loader into loader chain.\n\n``` javascript\nvar IntlPlugin = require(\"intl-webpack-plugin\");\nvar theIntl = new IntlPlugin({...})\n\n{\n  module: {\n  loaders: [\n      theIntl.loader({...options}),\n      // some more pre loaders\n    ],\n  }\n  plugins: [\n     theIntl\n  ]\n}\n\n```\n\nPreliminary loaders must be applied before intl loader. This means that\nintl loader must be final loader in loaders chain.\n\nLoader function waits hash of configuration options as its param.\nDefault values of loader may be specified in plugin configuration\ndescribed above.\n\nLoader options:\n\n* `group` - devides files into separated assets by specifying\n  groping pattern. May include template placeholders described\n  below in groupping section.\n* `name` - specifies destination asset file name. String value\n  supportive loader template interpolation placeholders.\n\nConfiguration options specified directly in call `loader()` function\noverride same values specified as default in plugin configuration.\n\n\nThe `loader()` function may be invoked as class function if only one plugin\ninstance is passed to config. Therefore it is better to use object form\ninstead of class form:\n\n``` javascript\nvar theIntl = new IntlPlugin({...})\n\nloaders: [\n  // this form valid only for single plugin instance:\n  IntlPlugin.loader(),\n  // to avoid problems better to use always object form:\n  theIntl.loader(),\n],\n```\n\n\n## See also\n\n* **[demonstration application](https://github.com/oklas/component-intl-example)** -\n  with internationalization as example how to configure application and\n  how to import library support internationalization.\n* **[demonstration component library](https://github.com/oklas/component-intl-welcome)** -\n  example for more details about how to create library with support\n  internationalization.\n* **[join-webpack-plugin](https://github.com/oklas/join-webpack-plugin)** -\n  to join sources by user defined method.\n* **[merge-webpack-plugin](https://github.com/oklas/merge-webpack-plugin)** -\n  plugin to merge json files to asset (or aseets with grouping)\n\n\n## LICENSE\n\n#### [MIT](./LICENSE.md)\n\n[npm-image]: https://img.shields.io/npm/v/intl-webpack-plugin.svg\n[npm-url]: https://npmjs.com/package/intl-webpack-plugin\n[travis-image]: https://travis-ci.org/oklas/intl-webpack-plugin.svg\n[travis-url]: https://travis-ci.org/oklas/intl-webpack-plugin\n[cover-image]: https://img.shields.io/codecov/c/github/oklas/intl-webpack-plugin.svg\n[cover-url]: https://codecov.io/gh/oklas/intl-webpack-plugin","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foklas%2Fintl-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foklas%2Fintl-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foklas%2Fintl-webpack-plugin/lists"}