{"id":20290603,"url":"https://github.com/gocardless/systemjs-assetgraph","last_synced_at":"2025-07-01T03:05:52.197Z","repository":{"id":24475004,"uuid":"27878932","full_name":"gocardless/systemjs-assetgraph","owner":"gocardless","description":"AssetGraph transform for optimizing SystemJS pages for production","archived":false,"fork":false,"pushed_at":"2020-07-15T19:40:45.000Z","size":13,"stargazers_count":22,"open_issues_count":3,"forks_count":3,"subscribers_count":102,"default_branch":"master","last_synced_at":"2025-05-19T19:16:30.451Z","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":"qibaoguang/Spring-Boot-Reference-Guide","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gocardless.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":"2014-12-11T15:53:31.000Z","updated_at":"2018-12-21T11:28:03.000Z","dependencies_parsed_at":"2022-08-29T12:00:29.070Z","dependency_job_id":null,"html_url":"https://github.com/gocardless/systemjs-assetgraph","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/gocardless/systemjs-assetgraph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Fsystemjs-assetgraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Fsystemjs-assetgraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Fsystemjs-assetgraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Fsystemjs-assetgraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gocardless","download_url":"https://codeload.github.com/gocardless/systemjs-assetgraph/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Fsystemjs-assetgraph/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261095039,"owners_count":23108763,"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-14T15:08:26.573Z","updated_at":"2025-07-01T03:05:52.129Z","avatar_url":"https://github.com/gocardless.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"SystemJS AssetGraph\n===\n\nAn AssetGraph transform plugin to automatically detect and optimize the use of SystemJS in HTML files.\n\nIt works out the main entry point and configuration file for the HTML asset, and then generates the [SystemJS bundle](https://github.com/systemjs/builder),\nor [injects the depcache if using HTTP/2 for optimization](#http2-optimization).\n\n### Installation\n\n```\nnpm install assetgraph systemjs-assetgraph\n```\n\n### Usage\n\nConsider a simple SystemJS application:\n\napp/main.html\n```html\n\u003chtml\u003e\n  \u003cscript src=\"system.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"config.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003eSystem.import('main')\u003c/script\u003e\n```\n\nWe can build this with:\n\nbuild.js\n```javascript\nvar AssetGraph = require('assetgraph');\nvar systemJsAssetGraph = require('systemjs-assetgraph');\n\nvar outRoot = 'app-built';\n\nnew AssetGraph({root: 'app'})\n  .loadAssets(['*.html', '*.js'])\n  .queue(systemJsAssetGraph({\n    outRoot: 'app-built',\n    bundle: true,\n    builderConfig: {\n      sourceMaps: true,\n      lowResSourceMaps: true,\n      minify: true,\n      mangle: true,\n      config: {\n        map: {\n          app: 'app-compiled',\n        },\n      }\n  }\n  }))\n  .writeAssetsToDisc({url: /^file:/}, 'app-built')\n  .run(function (err) {\n    if (err) throw err;\n    console.log('Done');\n  });\n```\n\nThe SystemJS transform will automatically detect the `System.config(...)` and know to bundle `main`.\n\nIt will then update the config to reference the bundled file, with full source maps support.\n\n### Config Overrides\n\nIt can be useful to specify configuration overrides that are specifically for the production / build config.\n\nThis can be added with the `builderConfig.config` option:\n\n```javascript\n  .queue(systemJsAssetGraph({\n    outRoot: 'app-built',\n    bundle: true,\n    builderConfig: {\n      config: {\n        map: {\n          'some/module': 'production/module'\n        }\n      }\n    }\n  }))\n```\n\n### HTTP/2 Optimization\n\nIn HTTP/2, rather than generating a single bundle file, we can inject the dependency tree into the page, so that all modules are\nloaded in parallel.\n\nThis mode is enabled by setting `bundle: false` in the options.\n\nIn addition, each of the separate module files will be moved to a hashed file name and the hashes injected into the configuration\nso that when making application updates, only those modules that have changed need to be reloaded in the browser cache.\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgocardless%2Fsystemjs-assetgraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgocardless%2Fsystemjs-assetgraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgocardless%2Fsystemjs-assetgraph/lists"}