无法缩小此文件中的代码

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 line 18:0

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

error 命令失败，退出代码为 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和here。

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

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

Answer 1

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

来自官方疑难解答文档npm run build fails to minify

npm run build failed to minify 在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 2

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

最近我参与了一个项目，该项目使用旧版本的 create-react-app 和 webpack@3 和 uglifyJsPlugin 在它的 webpack 配置中。当我使用该项目时，当我安装其他 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 3

我找到了解决办法！

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

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

我通过导入外部库的缩小版本解决了这个问题。 FE for socket.io-client 更改

import io from 'socket.io-client';

到

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