今必要だと知らなかった依存関係をインストールするためだけに、ビルドスクリプトとサーバーをCtrl-Cするのは非効率的です。

代わりに、通常どおりrequireまたはimportを使用してください。作業中に不足している依存関係を自動的にインストールして保存するインストールが行われます！

$ npm install --save-dev install-webpack-plugin

使用法

webpack.config.js内

plugins: [
  new InstallPlugin()
],

これは次と同等です。:

plugins: [
  new InstallPlugin({
    dependencies: {
      peer: true,
    },
    packageManager: {
      type: this.getDefaultPackageManager(),
      options: {
        dev: false,
        quiet: false,
      },
    },
    prompt: true,
  });
],

オプション

dependencies

タイプ: Object

依存関係関連のオプション。

peer

タイプ: Boolean

デフォルト: true

不足しているピア依存関係をインストールします。

plugins: [
  new InstallPlugin({
    dependencies: {
      peer: true,
    }
  }),
],

packageManager

型: 'npm' | 'yarn' | 'pnpm' | Object | Function

依存関係のインストールに使用するパッケージマネージャー。

plugins: [
  new InstallPlugin({
      packageManager: 'yarn'
    },
  }),
],

packageManager に Function を渡して動的にすることもできます

plugins: [
  new InstallPlugin({
    packageManager: function(module, path) {
      return [
        "babel-preset-react-hmre",
        "webpack-dev-middleware",
        "webpack-hot-middleware",
      ].indexOf(module) !== -1;
    },
  }),
],

type

型: 'npm' | 'yarn' | 'pnpm'

依存関係のインストールに使用するパッケージマネージャーの名前。

options

タイプ: Object

パッケージマネージャー関連のオプション。

arguments

型: Array

パッケージマネージャーで使用するカスタム引数を提供します。

plugins: [
  new InstallPlugin({
      packageManager: {
        type: 'npm',
        options: {
          arguments: ['--ignore-scripts']
        }
      }
    },
  }),
],

dev

タイプ: Boolean

デフォルト: false

開発依存関係としてインストールします。

plugins: [
  new InstallPlugin({
      packageManager: {
        type: 'npm',
        options: {
          dev: true,
        }
      }
    },
  }),
],

quiet

タイプ: Boolean

デフォルト: false

コンソールログの量を減らします。

plugins: [
  new InstallPlugin({
      packageManager: {
        type: 'npm',
        options: {
          quiet: true,
        }
      }
    },
  }),
],

prompt

タイプ: Boolean

デフォルト: true

インストールを確認するためのプロンプトを表示します。

plugins: [
  new InstallPlugin({
      prompt: true,
    },
  }),
],

デモ

機能

• webpack ^v5.0.0 で動作します。
• .babelrc プラグインとプリセットを自動インストールします。
• ES5とES6モジュールの両方をサポートします。（例：require、import）
• 名前空間付きパッケージをサポートします。（例：@cycle/dom）
• ドット区切りパッケージをサポートします。（例：lodash.capitalize）
• CSSインポートをサポートします。（例：@import "~bootstrap"）
• webpackローダーをサポートします。（例：babel-loader、file-loaderなど）
• インラインwebpackローダーをサポートします。（例：require("bundle?lazy!./App"）
• 不足しているpeerDependenciesを自動インストールします。（例：@cycle/coreは自動的にrx@*をインストールします）
• webpackのresolve.aliasとresolve.root設定をサポートします。（例：require("react")をreact-liteにエイリアスできます）

貢献

まだお読みでない場合は、貢献ガイドラインをお読みください。

貢献