{"id":27323517,"url":"https://github.com/canopytax/webpack-system-register","last_synced_at":"2025-04-12T10:48:01.974Z","repository":{"id":57397495,"uuid":"56074313","full_name":"CanopyTax/webpack-system-register","owner":"CanopyTax","description":"A webpack plugin that wraps your bundle in a System.register","archived":false,"fork":false,"pushed_at":"2018-11-16T04:44:15.000Z","size":44,"stargazers_count":36,"open_issues_count":4,"forks_count":8,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-04-24T04:30:01.732Z","etag":null,"topics":["front-end","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CanopyTax.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":"2016-04-12T15:16:37.000Z","updated_at":"2023-03-22T18:59:32.000Z","dependencies_parsed_at":"2022-09-15T17:13:53.017Z","dependency_job_id":null,"html_url":"https://github.com/CanopyTax/webpack-system-register","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CanopyTax%2Fwebpack-system-register","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CanopyTax%2Fwebpack-system-register/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CanopyTax%2Fwebpack-system-register/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CanopyTax%2Fwebpack-system-register/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CanopyTax","download_url":"https://codeload.github.com/CanopyTax/webpack-system-register/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248557883,"owners_count":21124165,"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":["front-end","webpack"],"created_at":"2025-04-12T10:48:00.630Z","updated_at":"2025-04-12T10:48:01.958Z","avatar_url":"https://github.com/CanopyTax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-system-register\nA webpack plugin that wraps your bundle in a [System.register](https://github.com/ModuleLoader/es6-module-loader/wiki/System.register-Explained) call. This makes webpack bundles totally consumable by [SystemJS](https://github.com/systemjs/systemjs).\n\n## Alternatives\nNote that you can achieve much of the same behavior by changing your webpack config to [output an AMD module](https://webpack.js.org/configuration/output/#output-library), and then using externals to declare the dependencies that you want to get from SystemJS. This method is probably preferable over the webpack-system-register plugin, in most cases. One of the reasons why you may still want to use this plugin, though, is if you are having trouble configuring webpack's [public path](https://webpack.js.org/guides/public-path/#components/sidebar/sidebar.jsx), since webpack-system-register gives you the ability to use a dynamic public path at runtime in the browser (see configuration options below).\n\n## Motivation\n- `System.import` webpack apps.\n- Inject SystemJS modules into webpack bundles.\n- Export variables from webpack apps into SystemJS apps.\n\n## Usage\nFirst, install the webpack-system-register plugin.\n```bash\nnpm install --save-dev webpack-system-register\n```\n\nThen add it to your webpack plugins.\n```js\n// webpack.config.js\nconst WebpackSystemRegister = require('webpack-system-register');\n\nmodule.exports = {\n  ...\n\tplugins: [\n\t\tnew WebpackSystemRegister({\n\t\t\tsystemjsDeps: [\n\t\t\t\t/^react/, // any import that starts with react\n\t\t\t\t'react-dom', // only the `react-dom` import\n\t\t\t\t/^lodash/, // any import that starts with lodash\n\t\t\t],\n\t\t\tregisterName: 'test-module', // optional name that SystemJS will know this bundle as.\n\t\t}),\n\t],\n}\n```\n\n## Configuration Options\nAll configuration options are passed as properties of the object given to the WebpackSystemRegister constructor. All properties are optional and if no configuration is provided, webpack-system-register will simply wrap you webpack bundle in a System.register call (nothing more).\n\n- `systemjsDeps` (optional): an array of dependency names that should not be bundled into the webpack bundle, but instead be provided by SystemJS. These dependency names should either be literal strings or Regular Expressions.\n- `registerName` (optional): a string that SystemJS will use as the name of the module. Generally speaking, this is the name by which you want other code to be able to SystemJS.import() your webpack bundle.\n- `publicPath`: (optional) an object with configuration options for setting webpack's `output.publicPath` variable dynamically\n  - `useSystemJSLocateDir`: (optional) A subproperty of the `publicPath` object. If it is set to true, this will cause webpack's `output.publicPath` to be set *dynamically at runtime*, based on the URL address from which the webpack bundle was loaded by SystemJS. For example, if the webpack bundle is SystemJS.imported from url `http://localhost:8080/webpack.bundle.js`, the publicPath for webpack will be `http://localhost:8080`. Since this would completely overwrite the normal `output.publicPath` option that is passed directly to webpack, webpack-system-register will throw an error if both `output.publicPath` and `publicPath` are set. Additionally, at least for now, the `registerName` must also be provided in order to use `publicPath.useSystemJSLocateDir`. See example below\n```js\n// Example webpack.config.js showcasing usage of `useSystemJSLocateDir`\nvar WebpackSystemRegister = require('webpack-system-register');\n\nmodule.exports = {\n  output: {\n    filename: \"my-bundle.js\",\n    publicPath: null, // This MUST not be set when using `useSystemJSLocateDir`\n  },\n  plugins: [\n    new WebpackSystemRegister({\n      registerName: 'my-bundle', // required when using `useSystemJSLocateDir`\n      publicPath: {\n        useSystemJSLocateDir: true, // if this is set to true, publicPath must be omitted and registerName must be provided\n      }\n    }\n  ]\n}\n```\n \n## Exporting variables from webpack into SystemJS.\nTo do this, simply export the variables from your webpack entry file. They will automatically be exposed to anybody who `System.import`s your webpack bundle. Note that (at least right now) if you mutate an exported value that that mutation will *not* be re-exported like it's supposed to according to the ES6 spec. The reason for this is basically just that it's really hard for me to detect mutation so I decided not to try.\n\n## Examples\nTo run the [examples](https://github.com/CanopyTax/webpack-system-register/tree/master/examples) locally, choose the `webpack-app-x.x` app that you want to use and rename it to `webpack-app`, run `npm install \u0026\u0026 npm run build` from inside of the `basic-example` directory. Then run `npm start` and open up your web browser to localhost:8080.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanopytax%2Fwebpack-system-register","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanopytax%2Fwebpack-system-register","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanopytax%2Fwebpack-system-register/lists"}