Question

在Web应用程序中，我已经使用＆＃34; require＆＃34;并通过webpack理解：

3
三轨道-对照

这就是我使用它的方式：

var THREE = require('three');

var OrbitControls = require('three-orbit-controls')(THREE);

要添加物理，我尝试添加库physijs-webpack：

var PhysiJS = require('physijs-webpack')(THREE);

它在＆＃34; npm run build＆＃34;他说：找不到模块：错误：无法解析＆＃39; physijs-webpack＆＃39;

在控制台（Chrome开发工具）中显示以下错误：

"app.js:17 Uncaught Error: Cannot find module "physijs-webpack"
    at webpackMissingModule (app.js:17)
    at Object.defineProperty.value (app.js:17)
    at __webpack_require__ (bootstrap 460ca68f8e6f1e90ea58:19)
    at Object.<anonymous> (html5-entities.js:190)
    at __webpack_require__ (bootstrap 460ca68f8e6f1e90ea58:19)
    at module.exports.ctor.super_ (bootstrap 460ca68f8e6f1e90ea58:62)"

这是我的webpack.config文件：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/js/app.js',
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist'
    }
};

依赖关系是：

    "devDependencies": {
        "script-loader": "^0.7.0",
        "webpack": "^3.5.4",
        "webpack-dev-server": "^2.7.1",
        "yarn": "^0.27.5"
    },
    "dependencies": {
        "physijs": "^0.0.4",
        "physijs-webpack": "^0.0.2",
        "requirejs": "^2.3.4",
        "three": "^0.86.0",
        "three-orbit-controls": "^82.1.0"
    }
}

请你推荐一下，我做错了什么？

Answer 1

我通过遵循@ https://github.com/agilgur5/physijs-webpack

上的Webpack详细信息来遇到并解决了该问题

基本上...

npm install -S agilgur5/physijs-webpack

和

npm install -D worker-loader

我还必须更新我的webpack配置

// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}

参考：

Answer 2

tl; dr-您使用的是别人发布的残破构建。使用v0.1.0或更高版本，并阅读https://github.com/agilgur5/physijs-webpack/

上的说明

您好，我是physijs-webpack repo的创建者。

根据一个old version of the README和这个Twitter thread，我的端口一直在进行中，构建失败，直到2018年9月，当我决定再次尝试时。有人在不告诉我的情况下将我的存储库的构建版本破坏了发布到NPM，因此您最初在NPM上找到的软件包被破坏了。

2018年9月，我重写了大部分回购协议，并设法找到一种使之工作的方法。当时，我要求人们通过agilgur5/physijs-webpack进行安装，因为我无法控制NPM软件包。该月下旬，我获得了对该程序包的控制权，并且现在发布了v0.1.0和v0.1.1，它们具有成功且有效的构建。现在，您可以通过physijs-webpack进行安装，并按照软件包或存储库中的说明进行操作-即也可以将worker-loader作为devDependency进行安装。

为避免这种混乱，不久后将不再发布旧的NPM版本（v0.0.2）。

在您的Webpack配置上：

这里的另一个答案是更新您的Webpack配置，但这是 不正确 且无关紧要（甚至没有.worker.js扩展名）。 physijs-webpack实际上专门和有意使用了in-line loader，因此您不必可以在以下位置更新Webpack配置全部。

在physijs NPM包装上：

我还注意到您的physijs中有package.json － NPM包是由同一个人创建的，并且是physijs-webpack的副本。它在2018年9月未发布，同时我被授予physijs-webpack NPM软件包的所有权。

关于three集成：

我注意到的另一件事是three在您的package.json中。尽管对于较早的不起作用的版本，这是必需的，但在当前的有效版本中，它现在是peerDependency。您不再需要将THREE作为参数传递，但是由于大多数PhysiJS用法都需要您使用3，因此您仍然需要安装它。它也被固定在三个的r73版本中，因为那是PhysiJS支持的最新版本/具有兼容性。

Physijs-webpack库因require而失败

2 个答案: