Question

我正在创作一个我想放在npm上的JavaScript库。我目前在另一个项目中使用该库，并使用其GitHub存储库将其添加为依赖项：

"dependencies": {
  // ... others
  "react-web-component": "LukasBombach/react-web-component",
}

我也在使用UglifyJsPlugin的Webpack。现在，当我想构建我的项目时，我收到一个错误：

编译失败。

无法缩小此文件中的代码：

./ packages / react-scripts / node_modules / react-web-component / src / index.js第18行：0

在此处阅读更多内容：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

错误命令失败，退出代码为1。

这是我图书馆的问题。当我从我的deps（以及我的代码）中删除它时，编译工作。

我无法弄清问题是什么，我的代码看起来非常简单：

const ReactDOM = require('react-dom');
const retargetEvents = require('./retargetEvents');
const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');

module.exports = {
  create: function(app, tagName, options) {
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function() {
          const shadowRoot = this.createShadowRoot();
          const mountPoint = document.createElement('div');
          getStyleElementsFromReactWebComponentStyleLoader().forEach(style =>
            shadowRoot.appendChild(style)
          );
          shadowRoot.appendChild(mountPoint);
          ReactDOM.render(app, mountPoint);
          retargetEvents(shadowRoot);
        },
      },
    });
    document.registerElement(tagName, { prototype: proto });
  },
};

在retargetEvents和getStyleElementsFromReactWebComponentStyleLoader内部需要简单的module.export命令。您可以看到他们的源代码here和here。

我已经尝试使用ES6导出/导入命令发布我的库。

我的图书馆的完整源代码（它只是这3个文件）可以在https://github.com/LukasBombach/react-web-component

找到

Answer 1

我找到了解决方案！

我的代码中有一些ES6功能，即foreach ~运算符和速记函数语法。丑陋的人不接受这一点。我需要用ES5代码替换它，现在它运行良好。

Answer 2

我已通过导入外部库的精简版来解决此问题。 F.E.更改socket.io-client

import io from 'socket.io-client';

到

import io from 'socket.io-client/dist/socket.io.js';

Answer 3

对于那些您面临问题的人。首先检查您的package.json是否正在使用React-script1.x。如果是这样，请尝试升级到2.x.x。

摘自官方的故障排除文档npm run build fails to minify

npm run build无法缩小react-scripts@2.0.0之前的问题   是由第三方node_modules使用现代JavaScript引起的   功能，因为缩小器无法在构建过程中处理它们。   这已经通过编译标准的现代JavaScript功能解决了   在node_modules和更高版本的react-scripts@2.0.0内部。

如果看到此错误，则可能是您使用了旧版本的   react-scripts。您可以通过避免依赖项来修复它   使用现代语法，或升级到react-scripts@>=2.0.0并   遵循变更日志中的迁移说明。

升级。

npm install --save --save-exact react-scripts@2.x.x

或

yarn add --exact react-scripts@2.x.x

Answer 4

对于那些遇到无法升级react-scripts的人来说，这是我的故事：

首先，我将vscode与一些自动导入插件一起使用，该插件会自动在顶部添加导入。一切正常，直到昨天。

今天，我在本地分支上运行了部署脚本（上次运行是在上周），并且得到了这个可怕的错误消息，尤其是：

Failed to minify the code from this file:

    ./node_modules/re-reselect/src/cache/FifoObjectCache.js:4

这没有道理，因为master构建良好，并且从那时起我就没有更新过软件包。

无可救药，我开始逐个提交地建立提交（实际上我是从第一个提交开始的，然后当它在中间与其他一些一起尝试时，依此类推）寻找罪魁祸首。

然后我找到了！

自动导入插件将以下导入添加到了我的代码中：

import createCachedSelector from 're-reselect/src/index';

应该在什么时候出现：

import createCachedSelector from 're-reselect';

导致某些reselect源文件被编译，而不是使用库中已编译的源文件。

TL; DR; 不要相信您的自动导入插件。决不。曾经：facepalm：

Answer 5

对于仍然面临此问题的人们，我在这里找到了对我有用的解决方案；我将在这里逐步说明：

最近，我参与了一个项目，该项目在Webpack配置中使用了create-react-app和webpack@3的较旧版本的uglifyJsPlugin。当我处理项目时，主要问题是在安装其他npm软件包并在开发模式下使用它们一段时间后提出的。在完成对它们的任务后，当我想构建项目时，我面临着以下麻烦：

cannot minify code from this file blah blah blah...

由于缩小js文件而引起的问题，因此以为如果我更改webpack.config.prod的配置以更改其缩小过程，那么我将能够解决问题。因此，我检查了webpack.config.prod文件，发现它使用uglifyJsPlugin进行了缩小。我将配置更改为使用terser-webpack-plugin，但又收到另一个错误，指出该pkg用于webpack@4。最终，我最终在terser-webpack-plugin-legacy的配置中使用了webpack@3，它运行良好。请注意，我的create-react-app被弹出。

无法缩小此文件中的代码

5 个答案: