使用 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,
  });
],

選項

相依性

類型： Object

與相依性相關的選項。

同儕

類型： Boolean

預設值： true

安裝遺失的同儕相依性。

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

packageManager

類型： 'npm' | 'yarn' | 'pnpm' | 物件 | 函式

用於安裝相依套件的套件管理員。

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

您可以提供一個 函式 給 packageManager 以使其動態化

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

類型： 陣列

提供自訂參數以與套件管理員一起使用。

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）

貢獻

如果您尚未閱讀，請花點時間閱讀我們的貢獻指南。

貢獻