Navzdory svému věku stále existují některé aplikace AngularJS.
Zatímco většina webových stránek na internetu již nahradila AngularJS něčím novějším, za bezpečnými firewally firemních intranetů stále existují docela velké aplikace AngularJS.
Takže pokud se stále musíte vypořádat s AngularJS, máme dobré zprávy:I když pro vás upgrade z AngularJS nemusí být možností, stále můžete svým vývojářským zkušenostem poskytnout slušný upgrade tím, že ve svém projektu povolíte výměnu hot-module-replacement.

Upgradujte své vývojářské prostředí pomocí Hot-Module-Replacement

Jediným požadavkem je, aby váš projekt již používal balík (jako je webpack nebo Parcel), který podporuje výměnu hot-module-replacement (HMR) a babel pro transformaci vašeho zdroje.

Dále nainstalujte babel-plugin-ng-hot-reload balíček od npm:

npm i -D babel-plugin-ng-hot-reload     # npm or
yarn add -D babel-plugin-ng-hot-reload  # yarn

Nyní aktualizujte .babelrc.js soubor a přidejte nově nainstalovaný plugin:

// .babelrc.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false, // <- The plugin works with es-modules!
      },
    ],
  ],
  plugins: [
    'babel-plugin-ng-hot-reload',
  ],
};

Když používáte Parcel, není nutná žádná další konfigurace.
Pokud používáte webpack, nezapomeňte v webpack.config.js povolit výměnu hot-module-replacement :

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  mode: 'development,
  entry: [
    `${require.resolve('webpack-dev-server/client')}?/`, // <- add
    require.resolve('webpack/hot/only-dev-server'), // <- add
    './src/index.js'
  ],
  output: {
    path: 'dist',
    filename: 'app.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: ['babel-loader'],
        exclude: /node_modules/,
      },
      ...
    ],
  },
  resolve: {
    extensions: ['.js'],
  },
  plugins: [
    ...
    new webpack.HotModuleReplacementPlugin(), // <- add
  ],
  devServer: {
    hot: true, // <- add
  },
};

Nyní můžete upravovat své soubory HTML, CSS nebo JavaScript a měly by být nahrazeny bez opětovného načítání vaší aplikace.

Pro některé pokročilejší případy použití zde uvádíme několik příkladů dostupných na CodeSandbox:

• Ukázka webového balíčku / JavaScriptu na CodeSandbox
  • Používá angular jako globální proměnná
• Ukázka Webpack / TypeScript na CodeSandbox
  • Používá TypeScript babel-preset
  • Používá angularjs-annotate babel-plugin
  • Používá Lazy-Loading poskytované ocLazyLoad
• Ukázka Parcel / TypeScript na GitHubu (Neběží na CodeSandbox )
  • Používá Parcel místo webpack

Pár slov o babel-plugin-ng-hot-reload

Pod kapotou plugin spoléhá na solidní práci ng-hot-reload knihovna Oskari Noppa.
Vzhledem k tomu, že tato knihovna původně poskytuje webpack-loader, bylo použití omezeno na webpack.
Dalším omezením zavaděče je, že je kompatibilní pouze s commonJS moduly vytvořené babelem, takže pokud používáte import a export syntaxe se přepíše na require('...') a module.exports = {...} což je neslučitelné s třesením stromů.

Tento babel-plugin se hlouběji podívá na váš kód tím, že zachovává import s a export s a pouze přidá kód požadovaný pro hot-reload do modulů, které interagují s angular.
Kód pro prohlížeč je tedy méně nafouknutý a může používat stejné chvění stromů jako produkční verze (moduly AngularJS s líným načtením jsou také podporovány pluginem).

Pokud se chcete dozvědět více, plugin a příklady jsou open source a jsou k dispozici zde:

ofhouse / babel-plugin-ng-hot-reload

Hot reloading pro AngularJS aplikace přes babel plugin.

🔥 babel-plugin-ng-hot-reload

Babel plugin, který umožňuje výměnu horkých modulů v aplikacích AngularJS.
Plugin je založen na zavaděči webových balíčků ng-hot-reload, ale je přepsán jako plugin babel, takže je kompatibilní se syntaxí modulu es a každým bundlerem, který podporuje rozhraní API pro výměnu za provozu (např. webpack nebo balík).

Začínáme

npm i -D babel-plugin-ng-hot-reload     # npm or
yarn add -D babel-plugin-ng-hot-reload  # yarn

Přidejte do babelrc.js následující soubor:

// without options
module.exports = {
  plugins: ['babel-plugin-ng-hot-reload'],
};
// with options
module.exports = {
  plugins: [
    [
      'babel-plugin-ng-hot-reload',
      {
        angularGlobal: false,
        forceRefresh: true