{"id":28100380,"url":"https://github.com/tidev/webpack-plugin-alloy","last_synced_at":"2026-03-04T05:33:04.759Z","repository":{"id":41959028,"uuid":"262397049","full_name":"tidev/webpack-plugin-alloy","owner":"tidev","description":"Titanium Alloy Plugin for Appcd Webpack","archived":false,"fork":false,"pushed_at":"2024-03-06T21:45:12.000Z","size":605,"stargazers_count":3,"open_issues_count":9,"forks_count":0,"subscribers_count":10,"default_branch":"develop","last_synced_at":"2025-11-23T16:19:27.793Z","etag":null,"topics":["npm-package"],"latest_commit_sha":null,"homepage":"","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/tidev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":"tidev","liberapay":"tidev"}},"created_at":"2020-05-08T18:19:27.000Z","updated_at":"2022-03-30T05:49:38.000Z","dependencies_parsed_at":"2024-03-06T22:52:36.826Z","dependency_job_id":null,"html_url":"https://github.com/tidev/webpack-plugin-alloy","commit_stats":null,"previous_names":["appcelerator/webpack-plugin-alloy"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/tidev/webpack-plugin-alloy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidev%2Fwebpack-plugin-alloy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidev%2Fwebpack-plugin-alloy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidev%2Fwebpack-plugin-alloy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidev%2Fwebpack-plugin-alloy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tidev","download_url":"https://codeload.github.com/tidev/webpack-plugin-alloy/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidev%2Fwebpack-plugin-alloy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30072547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T05:31:57.858Z","status":"ssl_error","status_checked_at":"2026-03-04T05:31:38.462Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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"],"created_at":"2025-05-13T18:34:04.275Z","updated_at":"2026-03-04T05:33:04.729Z","avatar_url":"https://github.com/tidev.png","language":"JavaScript","funding_links":["https://github.com/sponsors/tidev","https://liberapay.com/tidev"],"categories":[],"sub_categories":[],"readme":"# @titanium-sdk/webpack-plugin-alloy\n\n\u003e Titanium Alloy Plugin for Appcd Webpack\n\n## Installation\n\nTo install this plugin in an existing project, run the following command in your project root:\n\n```sh\nnpm i -D @titanium-sdk/webpack-plugin-alloy alloy alloy-compiler @titanium-sdk/webpack-plugin-babel\n```\n\n\u003e 💡 **NOTE:** The `alloy-loader` used to compile Alloy components with Webpack emits ES6 code only. This code needs to be transpiled which is why `@titanium-sdk/webpack-plugin-babel` is a peer dependency and you must install it as well when enabling Webpack in your Alloy project.\n\nBe sure to follow the migration steps below and the general [migration guideline](https://github.com/appcelerator/appcd-plugin-webpack/blob/develop/migration.md) when enabling Webpack in an existing Titanium Alloy project. Also take a look at the [configuration](https://github.com/appcelerator/webpack-plugin-babel#configuration) of the Babel plugin.\n\n## Caching\n\nOutput of this loader is cached using [cache-loader](https://github.com/webpack-contrib/cache-loader). The cache is stored under `\u003cproject\u003e/node_modules/.cache/alloy-loader`. If you also use the Babel or TypeScript plugin the cache identifier is `alloy-babel-loader` or `alloy-ts-loader`, respectively.\n\n## Migration\n\n### Remove old Alloy plugin\n\nSince Webpack now compiles your Alloy app the default Alloy plugin is not required anymore. You can safely delete `plugins/ti.alloy` and remove it from the `plugins` section of your `tiapp.xml`.\n\n### Create required folders\n\nWebpack requires that your project includes certain Alloy sub-folders, even if they are empty. This is due to the way Webpack resolves dynamic requires and it needs to scan folders like `app/controllers` or `app/widgets`. Make sure your project contains the following files and folders and create them if neccessary:\n\n```txt\napp/\n├── assets/\n├── controllers/\n├── lib/\n├── models/\n├── styles/\n├── views/\n├── widgets/\n├── alloy.js\n└── config.json\n```\n\n\u003e 💡 **TIP:** Add a `.gitkeep` file in any empty directories you created to make sure they will be added to Git.\n\n### assets/lib/vendor folders\n\nWhen you are migrating from an Alloy app without Webpack, you are probably used to the fact all content from the following directories is copied to your app:\n\n- `app/assets`\n- `app/lib`\n- `app/vendor`\n\nThis is only true for `app/assets` by default when you are using Webpack. All files from this directory will be copied directly into your app _as-is_. Source files in `app/lib` and `app/vendor` **need** to be `require`/`import`'ed to be bundled by Webpack so they are included in your app.\n\nUsage of the `app/vendor` directory is discuraged with Webpack. It is recommended to install all your third-party libraries as Node modules and let Webpack process them from there.\n\n### Code changes\n\nIn addition to the changes described in the [general guidelines](https://github.com/appcelerator/appcd-plugin-webpack/blob/develop/migration.md), there are a couple of Alloy specific changes that your need to apply to your project.\n\n#### Require files in assets/lib/vendor\n\nWith Webpack requires are resolved at build time on your local machine, not at runtime from the root directory of your final app bundle. This may break some of your existing require statement since they rely on files being merged into the `Resources` dir by Alloy to be valid. Some of these requires in your app may need to be rewritten to accomodate this change.\n\n##### Aliases\n\nThere are two aliases defined in the Webpack configuration for Alloy that will help you to easily adopt to the changed behavior.\n\n- `@` -\u003e `app/lib`\n\n  Example: `@/utils` would resolve to `app/lib/utils.js`\n- `@@` -\u003e `app`\n\n  Example: `@@/vendor/some-lib` would resolve to `app/vendor/some-lib.js`\n\n##### Absolute requires\n\nTo require `app/lib/auth.js` the following statements are valid in a plain Alloy app:\n\n```js\n// without webpack\nrequire('/auth');\nrequire('auth');\n```\n\nOnly `require('auth')` will work out of the box when the Webpack build is used, though. So you either have to drop the leading slash to make a [module require](https://github.com/appcelerator/appcd-plugin-webpack/blob/develop/migration.md#module-paths) or use the `@` [alias](#aliases) shown above.\n\n```js\n// with webpack\nrequire('@/auth');\nrequire('auth');\n```\n\n\u003e 💡 **TIP:** It is recommended to use the `@` alias instead of relying on the non-spec compliant module resolution that Titanium supports. That way it is more obvious where the file actually comes from. You can also [define your own aliases](https://github.com/appcelerator/appcd-plugin-webpack/blob/develop/migration.md#add-alias).\n\n##### Relative requires\n\nAnother example are relative requires in `app/alloy.js`. Again, these are resolved at build time so they need to be slightly changed. Let's assume `app/alloy.js` contains the following require to the file `app/lib/cache.js`:\n\n```js\n// without webpack\nconst cache = require('./cache');\n```\n\nWhen resolved locally on your machine the require would resolve to `app/cache.js` which doesn't exist. Let's use the `@` alias again to refer to the correct file:\n\n```js\n// with weback\nconst cache = require('@/cache');\n```\n\n#### Prefer `alloy` to require Alloy\n\nUse a module style require when requiring Alloy related files, e.g. controllers, internals or built-ins.\n\n```js\nconst animation = require('alloy/animation');\n```\n\nFor Backwards compatibility the absolute `/alloy` require is supported as well, but using a module style require is strongly recommened.\n\n#### Replace `WPATH` with `@widget`\n\nRequires in widgets need to use `@widget` instead of `WPATH`\n\n```js\n// without webpack\nrequire(WPATH('utils'))\n\n// with webpack\nrequire('@widget/utils')\n```\n\n#### Use ES6 `export` in Models\n\nModels **need** to use ES6 `export`. To migrate, symply change `exports.definition =` to `export const definition =`.\n\n```js\n// without webpack\nexports.definition = {\n  config: {\n    // ...\n  }\n}\n\n// with webpack\nexport const definition = {\n  config: {\n    // ...\n  }\n}\n```\n\n### Notes\n\nA few use cases from the original Alloy build are not supported yet when using Webpack. There are also some gotchas when you are coming from a legacy Alloy project that you need to be aware of when migrating your Alloy app to Webpack.\n\n- Place **all** your JS source code that needs to be bundled by Webpack in `app/lib`. Remember that Webpack will only bundle your JS files when your actually `require`/ `import` them. They will **not** automatically be copied into the app.\n- Only the `app/assets` folder will be copied to your app directly. The same applies to widget's `assets` directory.\n- JavaScript files in `app/assets` will be copied as-is and will not be transpiled via Babel. Keep this in mind when you are trying to use them in a WebView, for example.\n- Source files in `app/lib` and `app/vendor` **need** to be `require`/`import`'ed to be bundled by Webpack so they are included in your app.\n- Usage of the `app/vendor` directory is discuraged with Webpack. Consider NPM packages to use third-party dependencies with Webpack, or move existing source code to `app/lib` if you can't rely on NPM packages for a specific dependency.\n\n### Known limitations\n\n- No support for Alloy JS makefiles (JMK).\n- No support for `DefaultIcon.png` from themes.\n- Views always need to have a matching file in `controllers`. The controller file can be empty, but it needs to be there for Webpack to properly discover the component.\n\n## Webpack configuration\n\nThis plugin will add/modify the following Webpack options:\n\n### Resolve\n\n- Aliases\n  - `@`: `app/lib`\n  - `@@`: `app`\n- Extensions: `xml`, `tss`\n- Modules: `app/lib`, `app/vendor`\n\n### Rules\n\n- `rule('js')`\n- `rule('js').use('cache-loader')`\n- `rule('js').use('alloy-loader')`\n- `rule('ts').use('alloy-loader')` (when used alongside `@titanium-sdk/webpack-plugin-typescript`)\n\n### Plugins\n\n- `plugin('alloy-loader')`: plugin from [`alloy-loader`](https://github.com/appcelerator/alloy-loader/blob/develop/lib/plugin.js)\n- `plugin('copy-theme-files')`: copy files from theme's `assets` and `platform` if a theme is configured\n- `plugin('copy-platform')`: copy files from `app/platform/\u003cplatform\u003e` into `platform/\u003cplatform\u003e`\n- `plugin('copy-assets')`: copy files from `app/assets` into `Resources`\n- `plugin('copy-widget-assets')`: copy files from `app/widget/\u003cwidget\u003e/assets` into `Resources/\u003cwidget\u003e`\n- `plugin('backbone-externals)`: mark unused backbone dependencies as external modules to prevent bundling\n- `plugin('watch-ignore)`: ignore watching of generated Alloy config files\n- `plugin('alloy-defines)`: use `DefinePlugin` to replace a couple of constants in Alloy\n- `plugin('widget-alias)`: rewrite requires from widgets that use `@widget` to point to a widget's `lib` folder.\n- `plugin('bootstrap-files)`: modify bootstrap entry to search `app/lib` for `.bootstrap.js` files\n- `plugin('moment-locales')`: filter moment.js locales based on languages in `app/i18n` folder\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftidev%2Fwebpack-plugin-alloy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftidev%2Fwebpack-plugin-alloy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftidev%2Fwebpack-plugin-alloy/lists"}