{"id":26120584,"url":"https://github.com/kije/webpack-fallback-directory-resolver-plugin","last_synced_at":"2025-04-13T12:10:18.564Z","repository":{"id":57409645,"uuid":"104555933","full_name":"kije/webpack-fallback-directory-resolver-plugin","owner":"kije","description":"Webpack Resolver plugin to resolve modules and files through a fallback chain at compile time.","archived":false,"fork":false,"pushed_at":"2020-11-22T12:55:59.000Z","size":147,"stargazers_count":5,"open_issues_count":2,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T22:20:15.326Z","etag":null,"topics":["npm-package","resolve-modules","resolver","webpack","webpack-plugin","webpack-resolver-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/webpack-fallback-directory-resolver-plugin","language":"TypeScript","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/kije.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-23T09:20:37.000Z","updated_at":"2021-08-19T08:36:34.000Z","dependencies_parsed_at":"2022-08-24T20:00:18.922Z","dependency_job_id":null,"html_url":"https://github.com/kije/webpack-fallback-directory-resolver-plugin","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kije%2Fwebpack-fallback-directory-resolver-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kije%2Fwebpack-fallback-directory-resolver-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kije%2Fwebpack-fallback-directory-resolver-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kije%2Fwebpack-fallback-directory-resolver-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kije","download_url":"https://codeload.github.com/kije/webpack-fallback-directory-resolver-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248402525,"owners_count":21097330,"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":["npm-package","resolve-modules","resolver","webpack","webpack-plugin","webpack-resolver-plugin"],"created_at":"2025-03-10T13:43:17.470Z","updated_at":"2025-04-13T12:10:18.540Z","avatar_url":"https://github.com/kije.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-fallback-directory-resolver-plugin\nWebpack Resolver plugin to resolve modules and files through a fallback chain at compile time.\n\n## Description\nThis is a Resolver-Plugin for webpack. It enables resolving modules by looking up files in an fallback directory chain.\n\nLet's look at a simple example.\n\nSuppose you have an application `greeter` to greet users in different languages. \nThe file structure of this application looks something like this:\n\n```\n/greeter\n  - /src\n    - /de \n      - translations.js\n    - /en \n      - translations.js\n      - ordnial.js\n    - ordnial.js\n    - index.js\n    \n```\n\nThe `translations.js` files contain the translated strings, which are used by index.js.\n\n```js \n// /greeter/src/en/translations.js\n\nexport default {\n    \"hello\": \"Hello\",\n    \"nth_visitor_start\": \"You are the\",\n    \"visitor\": \"visitor\"\n    // ...\n};\n```\n\n```js \n// /greeter/src/de/translations.js\n\nexport default {\n    \"hello\": \"Hallo\",\n    \"nth_visitor_start\": \"Du bist der\",\n    \"visitor\": \"Besucher\"\n    // ...\n};\n```\n\nThere are also two `ordnial.js` files containing a function which returns a number with its ordinal postfix.\n\n```js \n// /greeter/src/ordnial.js\n\nexport default (num) =\u003e {\n    return `${num}.`;\n};\n```\n\n```js \n// /greeter/src/en/ordnial.js\n// different ordnial postfixes for en\n\nexport default (num) =\u003e {\n    switch (num) {\n        case 0:\n           return num;\n         \n        case 1:\n            return `${num}st`;\n         \n        case 2:\n            return `${num}nd`;\n            \n        case 3:\n            return `${num}rd`;\n            \n        default:\n            return `${num}th`;\n    }\n};\n```\n\n\nNow suppose you want to create two separate webpack builds for each language. \nThe resulting build should only contain the translations strings and the ordinal function for its language.\n\nTo do this, you can set up `webpack-fallback-directory-resolver-plugin` to resolve these files based on a language parameter (Environment variable) on build time.\n\n```js\n// webpack.config.js\n\nconst FallbackDirectoryResolverPlugin = require('webpack-fallback-directory-resolver-plugin');\nconst path = require('path');\n\n// get the language from the environment\nconst language = process.env.LANGUAGE || 'en';\n\nmodule.exports = {\n    context: __dirname,\n    entry: \"./src/index.js\",\n    output: {\n        path: __dirname + \"/dist\",\n        filename: `script.${language}.js`\n    },\n    resolve: {\n        plugins: [\n            new FallbackDirectoryResolverPlugin(\n                {\n                    prefix: 'language-resolve',\n                    directories: [\n                        // this is the fallback directory chain. The plugin tries to resolve the file first \n                        // in the `src/${language}` folder. If it can't be found there, it will try to resolve it in the next directory in the chain, and so on...\n                        path.resolve(__dirname, `src/${language}`),\n                        path.resolve(__dirname, `src`)\n                    ]\n                }\n            )\n        ]\n    }\n};\n\n```\n\n\n```js \n// /greeter/src/index.js\n\nimport translations from \"#language-resolve#/translations.js\"; // translations is dynamically resolved to\nimport ordinal from \"#language-resolve#/ordnial.js\"; \n\nconst greet = (name) =\u003e {\n    console.log(`${translations.hello}`)\n};\n\nconst greetNthVisitor = (num) =\u003e {\n    // this will output \"You are the 1st Visitor\" in the en build, \n    // and \"Du bist der 1. Besucher\" in the de  build.\n    console.log(`${translations.nth_visitor_start} ${ordinal(num)} ${translations.visitor}`)\n};\n\nexport { \n    greet,\n    greetNthVisitor\n};\n\n```\n\nAnother usage example would be a react application, which has multiple themes with different JSX-Markups. \n\nFor more information, take a look at the [example application](https://github.com/kije/webpack-fallback-directory-resolver-plugin/tree/master/example). \n\n\n\n## Installation\n\nInstall this plugin via `yarn` or `npm` alongside with [`webpack`](https://www.npmjs.com/package/webpack).\n\n```bash\nyarn add --dev webpack-fallback-directory-resolver-plugin\n```\nor\n\n```bash\nnpm install --save-dev webpack-fallback-directory-resolver-plugin\n```\n\n## Usage\nAdd `webpack-fallback-directory-resolver-plugin` as a `resolve`-Plugin in your `webpack.config.js`-File\n\n**Example**\n```js\n// webpack.config.js\n\nconst FallbackDirectoryResolverPlugin = require('webpack-fallback-directory-resolver-plugin');\n\n// ...\n\nmodule.exports = {\n    // ...\n    \n    resolve: {\n        plugins: [\n            new FallbackDirectoryResolverPlugin(\n                {\n                    prefix: 'fallback',\n                    directories: [\n                        // this is the fallback directory chain. The plugin tries to resolve the file first \n                        // in the `js/dir2` folder. If it can't be found there, it will try to resolve it in the next directory in the chain, and so on...\n                        path.resolve(__dirname, 'js/dir2'),\n                        path.resolve(__dirname, 'js/dir1')\n                    ]\n                }\n            )\n        ]\n    }\n};\n\n```\n\n### Options\n\nThe `FallbackDirectoryResolverPlugin` takes an option object as its argument.\n\nPossible options are:\n\n#### prefix\nThe prefix is used to make sure this resolver is only used explicitly.\n\nAlso, you could add multiple instances of this plugin with different prefixes.\n\nUsage: prefix the module path in the import statement with `#\u003cprefix\u003e#/\u003cfile-to-resolve\u003e`, where `\u003cprefix\u003e` is the prefix you specified in `options.prefix`.\n\nDefault: fallback\n\n#### directories\nAn array of directory paths the resolver should try to resolve the imported files in.\n\nThe plugin tries to resolve the file first in the first directory. If it can't find it there, it tries the next directory and so on.\n\n\n## Bugs\nIf you encounter any bugs, please consider [opening an issue on GitHub](https://github.com/kije/webpack-fallback-directory-resolver-plugin/issues).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkije%2Fwebpack-fallback-directory-resolver-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkije%2Fwebpack-fallback-directory-resolver-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkije%2Fwebpack-fallback-directory-resolver-plugin/lists"}