无法缩小此文件中的代码

Question

我正在编写一个我想放在 npm 上的 JavaScript 库。我目前正在另一个项目中使用该库，并使用其 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 导出/导入命令发布我的库。

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

原文由 Lukas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我找到了解决方案！

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

原文由 Lukas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

npm run build fails to minify 在 react-scripts@2.0.0 之前，这个问题是由第三方 node_modules 使用现代 JavaScript 特性引起的，因为 minifier 在构建期间无法处理它们。这已通过在 node_modules 在 react-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

原文由 Ken Ratanachai S. 发布，翻译遵循 CC BY-SA 4.0 许可协议