忽略 webpack 中的一些安装包

Question

我的 webpack 配置适用于以下package.json ：

{
  "peerDependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-three-fiber": "4.0.21"
  },
  "dependencies": {
    // more unrelated packages
  },
  "devDependencies": {
    // more unrelated packages
  },
}

但是当我将react-three-fiber添加到devDepedencies （ storybook需要它）时，它不起作用（模块包含在包中并且与多个反应渲染器存在冲突）：

{
  "peerDependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-three-fiber": "4.0.21"
  },
  "dependencies": {
    // more unrelated packages
  },
  "devDependencies": {
    "react-three-fiber": "4.0.21",
    // more unrelated packages
  },
}

有没有办法从node_modules忽略这些文件夹？

这是我的 webpack 配置：

module.exports = {
    mode: "production",
    devtool: "inline-source-map",
    entry: "./src/index.ts",
    target: ["web", "es5"],
    output: {
        filename: "index.js",
        pathinfo: false,
        libraryTarget: 'umd',
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/, 
                loader: "ts-loader",
                options: {
                    transpileOnly: true,
                    experimentalWatchApi: true,
                },
            }
        ]
    },
    externals: {
        "react": {
            commonjs: "react",
            commonjs2: "react"
        },
        "react-dom": {
            commonjs: "react-dom",
            commonjs2: "react-dom"
        },
        "react-three-fiber": {
            commonjs: "react-three-fiber",
            commonjs2: "react-three-fiber"
        }
    }
};

Answer 1

最后我使用别名解决了它。

我为react-three-fiber创建了一个别名：

// package.json

  "devDependencies": {
    "storybook-react-three-fiber": "npm:react-three-fiber@4.0.21",
    // more unrelated packages
  },

执行npm install 。

我扩展了 webpack 配置以使用它：

// .storybook/main.js

const path = require("path");

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias['react-three-fiber'] = path.resolve(__dirname, './../node_modules/storybook-react-three-fiber')
    return config
  },
  // more unrelated config
}

现在 Storybook 可以使用它，并且它被项目的 webpack 配置忽略，因为 node_modules 的文件夹名称现在是storybook-react-three-fiber 。