15

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

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

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

编译失败。

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

./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。

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

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

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 });
  },
};

在retargetEventsand getStyleElementsFromReactWebComponentStyleLoaderrequires 里面有简单的module.export命令。你可以在这里和这里查看他们的源代码。

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

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

4

5 回答 5

13

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

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

npm run build failed to minify 之前react-scripts@2.0.0，这个问题是由第三方node_modules使用现代 JavaScript 特性引起的，因为在构建过程中 minifier 无法处理它们。这已通过在node_modulesinreact-scripts@2.0.0和更高版本中编译标准的现代 JavaScript 功能来解决。

如果您看到此错误，您可能使用的是旧版本的 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
于 2019-02-07T01:00:26.873 回答
11

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

最近我参与了一个项目，它使用了旧版本的create-react-appwithwebpack@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被驱逐了。

于 2019-06-06T06:33:18.687 回答
6

我找到了解决方案！

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

于 2017-08-14T11:02:18.197 回答
3

对于任何遇到升级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;博士; 不要相信您的自动导入插件。绝不。曾经。:facepalm:

于 2019-04-26T02:33:30.320 回答
3

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

import io from 'socket.io-client';

到

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

于 2020-05-26T13:35:34.447 回答