{"id":13630020,"url":"https://github.com/msurdi/frontend-dependencies","last_synced_at":"2025-04-09T21:20:19.895Z","repository":{"id":44991843,"uuid":"67295933","full_name":"msurdi/frontend-dependencies","owner":"msurdi","description":"Copies node packages to a directory where your frontend tools will be able to find them","archived":false,"fork":false,"pushed_at":"2025-04-01T06:19:41.000Z","size":159,"stargazers_count":24,"open_issues_count":3,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T19:05:39.398Z","etag":null,"topics":["assets","dependencies","frontend","javascript","npm","statics"],"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/msurdi.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-03T15:02:12.000Z","updated_at":"2024-12-12T05:28:27.000Z","dependencies_parsed_at":"2025-01-08T14:31:48.764Z","dependency_job_id":"400a9ad0-d545-4e22-b2b8-7f5b20224c43","html_url":"https://github.com/msurdi/frontend-dependencies","commit_stats":{"total_commits":77,"total_committers":8,"mean_commits":9.625,"dds":"0.38961038961038963","last_synced_commit":"a7f042237ea42620cfa08f6a7f52bbdbb6d12d12"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msurdi%2Ffrontend-dependencies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msurdi%2Ffrontend-dependencies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msurdi%2Ffrontend-dependencies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msurdi%2Ffrontend-dependencies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msurdi","download_url":"https://codeload.github.com/msurdi/frontend-dependencies/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248112234,"owners_count":21049621,"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":["assets","dependencies","frontend","javascript","npm","statics"],"created_at":"2024-08-01T22:01:27.458Z","updated_at":"2025-04-09T21:20:19.860Z","avatar_url":"https://github.com/msurdi.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![Node.js CI](https://github.com/msurdi/frontend-dependencies/workflows/Node.js%20CI/badge.svg)\n\n\n# frontend-dependencies\n\nEasily manage your frontend dependencies in `package.json`:\nInstall node modules and copy desired files to each directory.\nYou can use all frontendDependencies also in the backend (isomorph JavaScript).\n\nNOTE: There is a breaking change from Version `0.4.0` to `1.0.0`. Be sure to update your projects to the new syntax!\n\n\n## Example\n\nYour package.json:\n\n```js\n{\n  \"name\": \"frontend-dependencies-test\",\n  \"version\": \"1.0.0\",\n   // etc.\n\n  \"devDependencies\": {\n    \"shelljs\": \"0.7.4\"\n  },\n  \"frontendDependencies\": {\n    \"target\": \"static/\",\n    \"packages\": {\n      \"jquery\": {\n          \"version\": \"3.1.0\",\n          \"src\": \"dist/jquery.min.js\"\n      },\n      \"normalize.css\": {\n          \"version\": \"4.2.0\",\n          \"src\": \"normalize.css\"\n      }\n    }\n  }\n}\n```\n\nYour target folder in your project will look like:\n\n```\n project\n   |\n   |_ static\n   |    |_ jquery.min.js\n   |    |_ normalize.css\n   |\n\n```\n\n## Full example\n\n```js\n{\n  \"name\": \"frontend-dependencies-test\",\n  \"version\": \"1.0.0\",\n  \"description\": \"frontend-dependencies test project\",\n  \"main\": \"index.js\",\n  \"author\": \"Matias Surdi \u003cmatias@surdi.net\u003e\",\n  \"license\": \"Apache-2.0\",\n  \"devDependencies\": {\n    \"shelljs\": \"0.7.4\"\n  },\n  \"frontendDependencies\": {\n    \"target\": \"static/\",\n    \"packages\": {\n\n      \"normalize.css\": \"4.2.0\", // copy whole package\n\n      \"jquery\": {               // with options\n          \"version\": \"3.1.0\",   // for `npm install`: version, tag or version range\n          \"src\": \"dist/*\"       // relative path in package to copy files\n          \"namespaced\": true    // extra parent folder with package Name\n      },\n\n      \"turbolinks\": {\n          // alternative to 'version`: specifie git url, tarball url, tarball file, folder\n          \"url\": \"git://github.com/turbolinks/turbolinks.git\",     \n          \"src\": \"{src,LICENSE}\", // copy multiple files\n          \"target\": \"static/turbo\" // specific target path\n      }\n    }\n  }\n}\n```\n\nYour target folder in your project will look like:\n\n```\n project\n   |\n   |_ static\n   |   |\n   |   |_ jquery\n   |   |    |_ core.js\n   |   |    |_ jquery.js\n   |   |    |_ jquery.min.js\n   |   |    |_ ...\n   |   |\n   |   |_ normalize.css\n   |   |    |_ CHANGELOG.md\n   |   |    |_ LICENSE.md\n   |   |    |_ normalize.css\n   |   |    |_ ...\n   |   |\n   |   |_ turbo\n   |        |_ src\n   |        |   |_ turbolinks\n   |        |\n   |        |_ LICENSE\n   |\n   |\n\n```\n\n\n## Installation\n\n\u003e npm install --save frontend-dependencies\n\nMake it a postinstall script by adding this to your package.json:\n```json\n    \"scripts\": {\n        \"postinstall\": \"node ./node_modules/frontend-dependencies/index.js\"\n    }\n```\n\nIf postinstall did not run you can use this after installed:\n\u003e npm run postinstall\n\nRun can also run it with\n\u003e ./node_modules/.bin/frontend-dependencies\n\nWindows user run it in PowerShell or use this command in Command Prompt:\n\u003e node_modules\\\\.bin\\\\frontend-dependencies.cmd\n\n### Packages Options\n\n#### version\nThe npm package name is taken from the specified name in \"frontendDependencies.packages\".\n```js\n                         // none: install latest\n    \"version\": \"0.2.4\"   // version\n    \"version\": \"beta\"    // tag\n    \"version\": \"^0.2.4\"  // version range\n```\n#### url\nAlternative sources for your packages.\n```js\n    \"url\": \"ssh://user@host.xz:port/path/to/repo.git/\"\n    \"url\": \"git://github.com/ember-cli/ember-cli.git#v0.1.0\"\n    \"url\": \"forever.tar.gz\"\n    \"url\": \"https://github.com/User/repo/archive/master.tar.gz\"\n    \"url\": \"/testfolder\"\n```\n\n#### src\nThe source file(s) or folder(s) within each npm package to be copied.\n\n```js\n   // option 1: do not specify to copy the whole folder\n\n   // option 2: copy one file or folder\n   \"src\": \"dist/*\"\n\n   // option 3: copy serveral files or folders\n   \"src\": \"{index.js,index.css}\"\n```\n\n#### target\n* specific target folder to copy the files of a frontend package to\n* if not specified, target is the global \"frontendDependencies.target\"\n\n```js\n   \"target\": \"dest\"\n```\n\n\n#### namespaced copy\nOften you will copy just a single file from a package and copy it in your static files folder. Doing this for 4 files, you won't experience namespace errors. If you copy more files or the whole folder (= no `src` option defined), then you want to create a parent folder with the actual module name. Enable this with the `namespaced` option; the default is false.\n\n```js\n   \"namespaced\": true\n```\nIf neither `src` nor `namespaced` options are specified as in the example below, `namespaced` defaults to true, to avoid namespace errors (e.g. file conflicts from two package.json).\n\n```js\n// no `src` and `namespaced` defined\n\"jquery\": {\n   \"version\": \"3.1.0\"\n},\n\"normalize.css\": {\n   \"version\": \"4.2.0\"\n}\n// =\u003e conflicts prevented, by parent folders with module name\n\n```\n\n## Tests\n\n\u003e npm test\n\n\n## ToDo\n\n* build a CI\n* improve testing\n\n## Experience with managing npm dependencies for the frontend\n\n* bower: possible, but a source of trouble\n* npm + grunt/gulp: possible, but you have two files to manage\n* pancake\n   * https://github.com/govau/pancake\n   * https://medium.com/dailyjs/npm-and-the-front-end-950c79fc22ce\n   * might be good to manage complexe dependencies in very large projects\n   * when you try not keep the ammount of dependencies at a reasonable level, this might be overkill\n\n## Ideas\nThe goal of this package is to make the management of frontend components easier and lower maintenance. Aspects we consider important for \"how to do it right\":\n\n* Most packages come with a ready to use (compiled and minified, etc.) version of js and css\n* With http2, the sending of small files is encouraged\n* The browser can cache common libs easy\n\nWe think to copy the needed part of a libs to your webserver folder, is simple and gives you most benefit.\n\nAlthough there is no handling of the dependencies of the frontend components (like a jQuery plugin needs jQuery), this seems not too important for small projects and also frontend packages can do this over peerDependencies.\n\nThis article is interesting: http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsurdi%2Ffrontend-dependencies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsurdi%2Ffrontend-dependencies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsurdi%2Ffrontend-dependencies/lists"}