无法缩小此文件中的代码

Question

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

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

我还将Webpack与一起使用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 });
  },
};

里面retargetEvents并getStyleElementsFromReactWebComponentStyleLoader要求有简单module.export的命令。您可以在此处和此处查看其源代码。

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

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

Answer 1

对于那些您面临问题的人。首先检查你的 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

Answer 2

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

最近我参与了一个项目，该项目使用旧版本的create-react-appwithwebpack@3和uglifyJsPluginwebpack 配置。当我在这个项目中工作时，主要问题和问题出现在我安装其他 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代码替换它，并且现在可以正常使用了。