Webpack パッケージ化された koa2 フレームワーク アプリの例の詳細な説明

koa を使用してサーバーを作成したとき、公開は悪夢でした。 src 内のすべてのファイルを上書きする必要があり、config 構成ファイルも上書きする必要があります。注意しないと、さまざまな問題がオンラインで報告され、公開する前にローカルでロールバックして調整する必要があります。 webpack を使用して koa アプリをパッケージ化する方法についての記事を偶然目にしました。webpack でバックエンドもパッケージ化できることがわかりました。こんなことは今まで考えたこともありませんでした。この記事では、webpack を使用して koa2 フレームワークをパッケージ化する手順と最終的なデプロイメントを主に紹介します。必要な方は参考にしていただければ幸いです。

主な問題点

1:node_modules内のすべてのモジュールがパッケージ化されていない

webpackの中心的な機能は、参照される各モジュールをファイルに入力し、さまざまな標準化されたモジュールを統合することです。モジュラー処理(webpack仕様)。

しかし、ノードには多数の fs と path の操作が含まれており、パッケージ化が完了するとこれらの fs と path の操作には操作オブジェクトがなくなり、さまざまなエラーが報告されます。

したがって、パッケージ化に webpack を使用する核心は、node_modules 内のすべてのモジュールをパッケージ化することを拒否し、相対パスによって参照されるファイルのみを 1 つのファイルにパッケージ化することです。たまたま、webapck にはパッケージ化する必要のないモジュールを除外する externals 属性が用意されていることがわかりました。

さらに詳しく見てみると、webpack、nodemon、babel-preset-env などのモジュールはアプリ開発環境が依存するパッケージであり、私たちのプログラムはこれらのモジュールをまったく必要としないことがわかります。

要約すると、必要なパッケージをすべて除外するだけで済みます。このモジュールは、package.json の依存関係にあるモジュールに対応します。依存関係と devDependency の違いを理解することが重要です。

そのため、externals-dependency プラグインを使用して externals 属性を操作し、依存関係を除外することができます。

コード:

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

2: ターゲットはノードを指します

公式ドキュメント: Node.js のような環境にコンパイルされます (チャンクをロードするには Node.js require を使用します)

コード:

target : 'node' ,

3: ノード構成を追加します

公式ドキュメント: これらのオプションは、特定の Node.js グローバル変数とモジュールをポリフィルするかモックするかを構成できます。これにより、もともと Node.js 環境用に記述されたコードをブラウザなどの他の環境で実行できるようになります。

コード:

ノード: {
コンソール: true、
グローバル: true、
プロセス: true、
バッファ: true、
__filename: true、
__dirname: true、
setImmediate: true、
path: true
},

4: バベル設定

ノードの下位バージョンがネイティブに async/await をサポートしていないという問題と互換性を持たせるため。ここでは、babel の babel-preset-env{"modules": false} 設定を使用します。この設定は、let と const から var など、es6 構文を es5 構文に変換します。

同時に、すべての async/await 関数も、ポリフィルで定義された _asyncToGenerator 関数に変換されます。

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, argument) return new Promise(function (resolve, raise) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { return; } if (info.done) { replace(value) } else { return Promise.resolve(value) ).then(function (value) { step("next", value); }, function (err) { step("throw", err); } } return step("next") });実際にはpromiseを使ってasync関数の機能を実装しています。

もちろん、この関数も実行時に regeneratorRuntime 関数が必要です。そこで、babel-polyfill をグローバルに導入して regeneratorRuntime 関数を提供しました。

注: ノードのバージョンが非常に高く、async/await をネイティブにサポートしている場合は、babel-preset-env と babel-polyfill を省略できます

コード:

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"'
      }
    }),
  ]
}

Deployment

パッケージ化後、デプロイするときは、ビュー内の package.json、app.js、および html をオンラインでデプロイするだけで済み、非常に便利です。次に、サーバー上で

2. npm run for

を実行すると、サーバーがバックグラウンドで実行されます。更新して公開する必要がある場合は、npm run dev または npm run build をローカルで再パッケージし、サーバーにドラッグして app.js を上書きするだけです。

関連する推奨事項:

nodejs で koa2 フレームワークを使用するチュートリアルの例を共有する

nodejs6 で koa2 フレームワークを使用するチュートリアル

以上がWebpack パッケージ化された koa2 フレームワーク アプリの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。