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 をオンラインでデプロイするだけで済み、非常に便利です。次に、サーバー上で
1. npm install2. npm run for
koa2 に関する推奨記事 10 件を実行すると、サーバーがバックグラウンドで実行されます。更新して公開する必要がある場合は、npm run dev または npm run build をローカルで再パッケージし、サーバーにドラッグして app.js を上書きするだけです。
関連する推奨事項:
nodejs で koa2 フレームワークを使用するチュートリアルの例を共有する
nodejs6 で koa2 フレームワークを使用するチュートリアル
以上がWebpack パッケージ化された koa2 フレームワーク アプリの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。