忽略 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 needs it) 时，它 不起作用 （模块包含在包中并且与多个反应渲染器有冲突）：

{
  "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。

忽略 webpack 中一些已安装的包

Ignore some installed packages in webpack

javascript

reactjs

webpack

package.json

storybook