无法缩小此文件中的代码

Question

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

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

我也在 UglifyJsPlugin 中使用 Webpack。现在，当我想要构建我的项目时，出现错误：

Failed to compile.

Failed to minify the code from this file:

./packages/react-scripts/node_modules/react-web-component/src/index.js line 18:0

Read more here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

error Command failed with exit code 1.

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

我不知道问题出在哪里，我的代码看起来很简单：

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 and here.

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

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

找到

Answer 1

我找到了解决方案！

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

Answer 2

对于您遇到的问题。首先检查你的 package.json 是否在使用 React-script 1.x。如果是这样，请尝试升级到 2.x.x.

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

npm run build fails to minify Before react-scripts@2.0.0, this problem was caused by third party node_modules using modern JavaScript features because the minifier couldn't handle them during the build. This has been solved by compiling standard modern JavaScript features inside node_modules in react-scripts@2.0.0 and higher.

If you're seeing this error, you're likely using an old version of react-scripts. You can either fix it by avoiding a dependency that uses modern syntax, or by upgrading to react-scripts@>=2.0.0 and following the migration instructions in the changelog.

升级。

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

或

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

Answer 3

对于遇到升级 react-scripts 无法解决问题的任何人，这是我的故事：

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

今天我运行我本地 b运行ch 上的部署脚本（上次我运行是上周）我收到了这个可怕的错误消息，特别是：

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 4

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

最近我参与了一个项目，该项目在其 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 被弹出了。

Answer 5

我已经通过导入缩小版的外部库解决了这个问题。 F.E。对于 socket.io-客户端更改

import io from 'socket.io-client';

至

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

无法缩小此文件中的代码

Failed to minify the code from this file

javascript

minify

node.js

uglifyjs2