web-dev-qa-db-ja.com

このファイルからコードを縮小できませんでした

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行18：0

詳細はこちら： https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-縮小

エラーコマンドは終了コード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 にあります。

javascriptnode.jsminifyuglifyjs2
8
Lukas

私は解決策を見つけました！

私のコードにはいくつかのES6機能、つまりforeach~演算子と簡略関数の構文。醜い人はそれを受け入れませんでした。私はそれをES5コードに置き換える必要がありましたが、今はうまく機能しています。

6
Lukas

それらのためにあなたは問題に直面しています。まず、React-script 1.xを使用しているかどうか、package.jsonを確認してください。その場合は、2.x.xにアップグレードしてください。

公式のトラブルシューティングのドキュメントから npm run build failed to minify

npm run buildがミニファイに失敗する[email protected]より前のバージョンでは、この問題はビルド中にミニファイアが処理できないため、サードパーティnode_modulesが最新のJavaScript機能を使用していることが原因でした。これは、node_modules内の[email protected]以上の標準の最新のJavaScript機能をコンパイルすることで解決されました。

このエラーが表示される場合は、古いバージョンのreact-scriptsを使用している可能性があります。最新の構文を使用する依存関係を回避するか、react-scripts@>=2.0.0にアップグレードして変更ログの移行手順に従うことで、問題を修正できます。

アップグレードしてください。

npm install --save --save-exact [email protected]

または

yarn add --exact [email protected]
3
Ken Ratanachai S.

まだこの問題に直面している人のために、私はここで私のために働いた解決策を見つけました。ここで段階的に説明します。

最近、古いバージョンのcreate-react-appを使用し、webpack@3とuglifyJsPluginをWebパック構成で使用するプロジェクトに参加しました。プロジェクトで作業している間、他のnpmパッケージをインストールしたときに発生した主な問題と問題は、開発モードでしばらく作業しました。それらのタスクを実行した後、プロジェクトを構築したいとき、私は頭痛の種に直面しました。

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

Jsファイルを縮小することで問題が発生したため、webpack.config.prodの設定を変更して、その縮小プロセスを変更すると、問題を解決できると考えました。 webpack.config.prodファイルを確認したところ、縮小にuglifyJsPluginを使用していることがわかりました。 terser-webpack-pluginを使用するように構成を変更したところ、このパッケージがwebpack@4用であることを示す別のエラーが発生しました。最後に、terser-webpack-plugin-legacy構成にwebpack@3を使用することになり、完全に機能しました。 create-react-appが削除されたことに注意してください。

3
a_m_dev

アップグレード中にこの問題が発生した場合は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：

2
inakiabt