Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ofhouse/babel-plugin-ng-hot-reload
Hot reloading for AngularJS apps via babel plugin.
https://github.com/ofhouse/babel-plugin-ng-hot-reload
angularjs babel-plugin hot-module-replacement hot-reload
Last synced: 11 days ago
JSON representation
Hot reloading for AngularJS apps via babel plugin.
- Host: GitHub
- URL: https://github.com/ofhouse/babel-plugin-ng-hot-reload
- Owner: ofhouse
- License: mit
- Created: 2019-11-24T17:29:50.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-11T15:54:59.000Z (over 4 years ago)
- Last Synced: 2024-12-10T14:28:46.303Z (23 days ago)
- Topics: angularjs, babel-plugin, hot-module-replacement, hot-reload
- Language: TypeScript
- Homepage: https://dev.to/ofhouse/angularjs-hot-module-replacement-with-babel-plugin-176f
- Size: 1.68 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🔥 babel-plugin-ng-hot-reload [](https://travis-ci.org/ofhouse/babel-plugin-ng-hot-reload)
A babel plugin which enables hot module replacement in AngularJS applications.
The plugin is based on the [ng-hot-reload](https://github.com/noppa/ng-hot-reload) webpack loader but is rewritten as babel plugin so that it is compatible with es-module syntax and every bundler which supports the hot-replacement API (e.g. [webpack](https://webpack.js.org/) or [parcel](https://parceljs.org/)).
## Getting started
> To see it in action you can simply checkout the examples on CodeSandbox:
>
> - [Webpack / JavaScript demo on CodeSandbox ](https://codesandbox.io/s/github/ofhouse/babel-plugin-ng-hot-reload/tree/master/examples/javascript-webpack)
> - [Webpack / TypeScript demo on CodeSandbox](https://codesandbox.io/s/github/ofhouse/babel-plugin-ng-hot-reload/tree/master/examples/typescript-webpack)
> - [Parcel / TypeScript demo on CodeSandbox](https://codesandbox.io/s/github/ofhouse/babel-plugin-ng-hot-reload/tree/master/examples/typescript-parcel) (There is an issue with HTML import, see: [FAQ](#known-issues-with-parcel))
```sh
npm i -D babel-plugin-ng-hot-reload # npm or
yarn add -D babel-plugin-ng-hot-reload # yarn
```
Add the following to your `babelrc.js` file:
```js
// without options
module.exports = {
plugins: ['babel-plugin-ng-hot-reload'],
};
// with options
module.exports = {
plugins: [
[
'babel-plugin-ng-hot-reload',
{
angularGlobal: false,
forceRefresh: true,
preserveState: true,
angularReference: "require('angular'), angular",
},
],
],
};
```
### Options
| Option | Default | Description |
| ------------------ | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `angularGlobal` | `false` (false or string) | Define whether angular is provided as global variable. Set to `'angular'` when `angular` is your global variable. |
| `forceRefresh` | `true` (boolean) | Whether to reload window automatically when a change in source files can't be hot-reloaded. Note that Webpack DevServer also has its own option hotOnly, which should also be configured correctly to get the behavior you want when hot reloading fails.
([ng-hot-reload option](https://github.com/noppa/ng-hot-reload#client-options)) |
| `preserveState` | `true` (boolean) | If true, the library attempts to preserve some state in scope and controller instances when they are reloaded. Preserving state is an experimental feature and quite "hackish" so it may cause problems in some cases. Setting this to `false` might help if you run into weird errors.
([ng-hot-reload option](https://github.com/noppa/ng-hot-reload#client-options)) |
| `angularReference` | `"require('angular'), angular"` (string) | JavaScript expression that will be evaluated to get a reference to angular.
([ng-hot-reload option](https://github.com/noppa/ng-hot-reload#client-options)) |
## FAQ
### Use together with `@babel/preset-env`
This plugin should work nicely together with the [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) plugin.
In opposite to the original ng-hot-reload webpack-loader it's **not** required to transpile your code to commonjs modules:
```js
module.exports = {
presets: [
[
'@babel/preset-env',
{
modules: false, // Don't transpile the modules (default)
},
],
],
plugins: ['babel-plugin-ng-hot-reload'],
};
```
For an example check out the [Webpack / Javascript example](./examples/javascript-webpack/).
### Use AngularJS as global variable
Per default the plugin looks for imports of `'angular'`-package and only adds the hot-module-reload code to this modules.
However in some environments angular is used as a global variable without being imported, so the plugin has a `angularGlobal` setting which supports the use of angular as a global variable:
```js
// Default mode: Add hot-module-reload only to files which import 'angular'
// app.module.js
import * as angular from 'angular'; // or
import angular from 'angular'; // or
import 'angular';
angular.module('hot-reload-demo', []);
////////////////////////////////////////////////////////////////////////////////
// Setting angularGlobal option: Use `angular` as global variable
// .babelrc.json
module.exports = {
plugins: [
[
'babel-plugin-ng-hot-reload',
{
angularGlobal: 'angular', // Name of the global angular variable
},
],
],
};
// app.module.js
angular.module('hot-reload-demo', []);
```
For an example check out the [Webpack / Javascript example](./examples/javascript-webpack/).
### Use together with `ngAnnotate`
You can also use the plugin together with [`babel-plugin-angularjs-annotate`](https://github.com/schmod/babel-plugin-angularjs-annotate).
For an example check out the [Webpack / TypeScript example](./examples/typescript-webpack/).
### Lazy-loading with `oclazyload`
This plugin also works with the lazy-loading library [ocLazyLoad](https://oclazyload.readme.io/).
For an example check out the [Webpack / TypeScript example](./examples/typescript-webpack/).
### Known issues with parcel
Since this plugin only requires babel, you can use every build tool which supports hot-module-replacement.
You can check out the [Parcel / TypeScript example](./examples/typescript-parcel/) to see how it works with other bundlers than webpack.
Unfortunately there is currently an issue related to parcel:
- No hot-module-replacement for HTML templates ([parcel#943](https://github.com/parcel-bundler/parcel/issues/943))
### Browser-compatibility
The plugin is compatible with the latest versions of Chrome, Firefox and IE11.
## Author
| [
Felix Haus](https://github.com/ofhouse)
[Website](https://felix.house/) • [Twitter](https://twitter.com/ofhouse)|
| :---: |
## License
MIT - see [LICENSE](./LICENSE) for details.