Webpack を使用して koa2 フレームワークアプリをパッケージ化するにはどうすればよいですか?-jsチュートリアル-php.cn

Webpack を使用して koa2 フレームワークアプリをパッケージ化するにはどうすればよいですか?

亚连

リリース： 2018-06-08 13:56:31

オリジナル

2537 人が閲覧しました

この記事では、webpack を使用して koa2 フレームワークをパッケージ化する手順と最終的なデプロイメントを紹介します。これは非常に実用的で、必要な友人は参照できます。

私が以前に koa を使用してサーバーを作成したとき、公開は簡単でした。悪夢。 src 内のすべてのファイルを上書きする必要があり、config 構成ファイルも上書きする必要があります。注意しないと、さまざまな問題がオンラインで報告され、公開する前にローカルでロールバックして調整する必要があります。 webpack を使用して koa アプリをパッケージ化する方法についての記事を偶然目にしました。webpack でバックエンドもパッケージ化できることがわかりました。こんなことは今まで考えたこともありませんでした。

重要な問題

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 環境用に記述されたコードをブラウザなどの他の環境で実行できるようになります。

コード:

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

ログイン後にコピー

4: babel設定

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

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

実際、Promise は非同期関数の機能を実装するために使用されます。

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

注: ノードのバージョンが非常に高く、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 install
2. npm run for

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

上記は私があなたのためにまとめたものです。

Reactを使ったコンポーネントライブラリの開発方法

fullpage.jsを使ってスクロールを実装する

npmを使ったElectronのインストールが失敗する問題

以上がWebpack を使用して koa2 フレームワークアプリをパッケージ化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。