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
エラーコマンドは終了コード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 にあります。
私は解決策を見つけました!
私のコードにはいくつかのES6機能、つまりforeach
~
演算子と簡略関数の構文。醜い人はそれを受け入れませんでした。私はそれをES5コードに置き換える必要がありましたが、今はうまく機能しています。
それらのためにあなたは問題に直面しています。まず、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]
まだこの問題に直面している人のために、私はここで私のために働いた解決策を見つけました。ここで段階的に説明します。
最近、古いバージョンの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
が削除されたことに注意してください。
アップグレード中にこの問題が発生した場合は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: