代码之家 › 专栏 › 技术社区 › Lukas

未能缩小此文件中的代码

uglifyjs2 minify node.js javascript

Lukas · 技术社区 · 7 年前

我正在编写一个JavaScript库,我想放在上面 npm

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

UglifyJsPlugin . 现在,当我想构建我的项目时,我遇到了一个错误:

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

这是我图书馆的一个问题。当我从我的DEP(和代码)编译工作中删除它时。

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

5 回复 | 直到 4 年前

Ken Ratanachai S. Vova K. 6 年前

npm run build fails to minify

npm运行生成之前未能缩小 react-scripts@2.0.0 是由第三方造成的 node_modules 功能,因为缩小器在构建过程中无法处理它们。在…内 node_模块 反应-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

halfer 5 年前

对于仍然面临这个问题的人,我在这里找到了一个适合我的解决方案;我将在这里逐步解释:

最近,我参与了一个使用旧版本的 create-react-app webpack@3 和 uglifyJsPlugin 在它的网页配置中。当我在项目中工作时,当我安装其他npm软件包并在开发模式下工作了一段时间时,出现了主要问题。在我完成了这些任务后,当我想要构建项目时,我面临着以下头痛问题:

cannot minify code from this file blah blah blah...

webpack.config.prod 要改变它的缩小过程,那么我就能解决这个问题。所以我检查了 网页包。配置。戳 文件,我看到它使用用于缩小。我将配置更改为使用 terser-webpack-plugin webpack@4 . 最后我使用了 terser-webpack-plugin-legacy 配置和它的工作完美。请注意,我的 创建react应用程序

Lukas 7 年前

我找到了解决办法!

我的代码中有一些ES6特性,即 foreach 这个 ~

inakiabt 5 年前

对于任何有此问题的人,在哪里升级 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;博士;

Anatoliy Litinskiy 4 年前

F、 E.插座。io客户端更改

import io from 'socket.io-client';

到

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