Explication détaillée des exemples d'applications du framework koa2 packagés par Webpack

Quand j'utilisais koa pour écrire des serveurs, la publication était un cauchemar. Tous les fichiers de src doivent être écrasés, et le fichier de configuration doit également être écrasé. Si vous ne faites pas attention, divers problèmes seront signalés en ligne, et vous devrez ensuite les restaurer et les ajuster localement avant de les publier. J'ai accidentellement vu un article sur la façon d'utiliser Webpack pour empaqueter l'application Koa. Il s'avère que Webpack peut également empaqueter le backend. Je n'y avais jamais pensé auparavant. Cet article vous présente principalement les étapes et le déploiement final de l'utilisation de webpack pour packager le framework koa2. C'est très pratique. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra vous aider.

Problèmes clés

1 : Tous les modules de node_modules ne sont pas empaquetés

Les fonctions de base de webpack It consiste à taper chaque module référencé dans un fichier, et une modularisation unifiée de différents modules standardisés (spécification webpack).

Cependant, le nœud contient un grand nombre d'opérations fs et path. Ces opérations fs et path n'auront aucun objet d'opération une fois l'empaquetage terminé, et de nombreuses erreurs diverses seront signalées.

Ainsi, l'essentiel de l'utilisation de webpack pour l'empaquetage est de refuser de conditionner tous les modules dans node_modules et de regrouper uniquement les fichiers référencés par des chemins relatifs dans un seul fichier. Il est arrivé que nous ayons constaté que webapck fournit l'attribut externals pour exclure les modules qui n'ont pas besoin d'être empaquetés.

Si nous creusons plus profondément, nous pouvons constater que des modules tels que webpack, nodemon et babel-preset-env sont des packages dont dépend l'environnement de développement d'applications, et notre programme n'aura pas du tout besoin de ces modules.

En résumé, on peut constater que : il suffit d'exclure tous les packages requis. Ce module correspond au module sous dépendances dans package.json. Il est important de comprendre la différence entre les dépendances et les devDependencies.

Nous pouvons donc utiliser le plug-in externals-dependencies avec l'attribut externals pour exclure les dépendances.

Code :

const webpack = require('webpack');
const _externals = require('externals-dependencies')
module.exports = {
  ...
  externals: _externals(),
  ...
}

Deux : points cibles vers le nœud

Documentation officielle : Compiler en classe L'environnement Node .js est disponible (utilisez Node.js requis pour charger le morceau)

Code :

cible : 'node',

Trois : Ajouter une configuration de nœud

Documentation officielle : ces options peuvent configurer s'il faut polyfiller ou se moquer de certaines variables et modules globaux Node.js. Cela permet au code initialement écrit pour l'environnement Node.js de s'exécuter dans d'autres environnements tels que les navigateurs.

Code :

nœud : {
console : vrai,
global : vrai,
processus : vrai,
Tampon : vrai,
__filename : true,
__dirname : true,
setImmediate : true,
chemin : true
},

Quatre : configuration Babel

Afin d'être compatible avec les versions inférieures de node, async/await n'est pas supporté nativement. Ici, j'utilise la configuration babel-preset-env{"modules": false} pour babel. Cette configuration convertira la syntaxe es6 en syntaxe es5, telle que let et const en var.

En même temps, toutes les fonctions async/await sont également converties en fonction _asyncToGenerator définie dans le polyfill.

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, rejet) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (erreur) {rejeter(erreur); if (info.done) { résoudre (valeur) else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); } } } return step("next); "); }); }; }

utilise en fait promise pour implémenter la fonction asynchrone.

Bien sûr, cette fonction a également besoin de la fonction regeneratorRuntime lors de son exécution. J'ai donc introduit babel-polyfill globalement pour fournir la fonction régénératorRuntime.

Remarque : Si la version de votre nœud est très élevée et prend en charge async/await de manière native, vous pouvez omettre babel-preset-env et babel-polyfill

Code :

const path = require('path');
const webpack = require('webpack');
const _externals = require('externals-dependencies')

module.exports = {
  entry: {
    app: [
      // 如果polyfill放在这里，打包的时候将不会被external,必须在js里require才能有效external
      // 'babel-polyfill',
      './src/index.js'
    ]
  },
  output: {
    path: path.resolve(__dirname),
    filename: '[name].js'
  },
  resolve: {
    extensions: [".js"]
  },
  target: 'node',
  externals: _externals(),
  context: __dirname,
  node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
  ]
}

Déploiement

Après l'empaquetage, le déploiement est beaucoup plus pratique. Il vous suffit d'ajouter package.json, app.js et view au HTML. le déploiement se fera en ligne. Exécutez ensuite

1. npm install
2. npm run for

sur le serveur, puis le serveur s'exécutera en arrière-plan. Si vous devez mettre à jour et publier, il vous suffit de reconditionner npm run dev ou npm run build localement et de le faire glisser vers le serveur pour écraser app.js.

Recommandations associées :

10 articles recommandés sur koa2

Partagez des exemples de didacticiels sur l'utilisation du framework koa2 dans nodejs

Tutoriel sur l'utilisation du framework koa2 dans nodejs6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!