Comment empaqueter l'application framework koa2 via webpack ?

Cet article vous présente 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

Quand j'utilisais koa pour écrire des serveurs dans le passé. , publier était tout simplement C'est 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.

Problèmes clés

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

La fonction principale de webpack est de référencer chaque Le module est saisi dans un fichier et divers modules standardisés sont unifiés et modularisé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 : cible les points vers le nœud

Documentation officielle : compilée dans un environnement de type Node.js disponible (en utilisant Node.js nécessite de charger un morceau)

Code :

target: 'node',

Trois : Ajouter la configuration du nœud

Document officiel : Ces options peuvent être configurées pour polyfiller ou se moquer de certaines variables et modules globaux de 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 :

node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
},

Quatre : configuration babel

Afin d'être compatible avec le problème que la version inférieure du nœud ne prend pas en charge nativement asynchrone/attendre. 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.

En fait, les promesses sont utilisées pour implémenter les fonctions des fonctions asynchrones.

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 de déployer package.json, app.js et le code HTML dans la vue 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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment développer des bibliothèques de composants à l'aide de React

Utiliser fullpage.js pour implémenter le défilement

Échec de l'installation d'Electron à l'aide de npm

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!