Unexpected token punc ":", expected punc "," のようなUglifyJsエラーの解決法
原因はvueのプロジェクトをパッケージングしていたこと。すると、このようなエラーが報告されました。キーには、エラーが報告された場所が明示されていません。Unexpected token punc ":", expected punc "," [static/js/app.28653113.js:4107,15] とだけヒントが書いてありました。 しかし、パッケージが通らなかったのです。このファイルは全くありません。Unexpected token punc ":", expected punc "," [. /src/utils/request.js:8,11][static/js/app.28653113.js:4107,15] とエラーが報告されることがあり、このように明確にファイルが並んでいいというヒントがあります。上記の報告されたエラーに遭遇した場合。入手方法です。一晩の努力の末に ようやくこの種の問題を解決する汎用的な方法を発見しました。
まず、webpackのドキュメントを見ます。その結果、uglifyjs-webpack-pluginプラグインにexcludeという設定があることがわかりました。つまり、設定されたファイルは圧縮プラグインによって除外されるので、この生成されたjsファイルを除外します。パッケージ化されたプロジェクトを取得し、トラブルシューティングを行うことができるようになります。
vue-cliの下位バージョンの場合、この時点でも設定を確認することができます。ビルドディレクトリにある webpack.prod.conf.js ファイルを探し、その中にある
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ecma: 8,
compress: {
warnings: false
}
}
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSAssetsPlugin()
}
このコードは上記の通りです。余談ですが、webpack4にはminimizerの設定しかありません。それ以下のバージョンにはないはずです。そして、excludeオプションを追加して、エラーを報告するファイルをインクルードします。
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ecma: 8,
compress: {
warnings: false
}
}
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSAssetsPlugin()
}
上記のエラーを報告し続けるこのファイルを除外することで、他のパラメータは無視することができます。主なものは除外で、パッケージは見事にパスし、以下のような結果になります。
Then we can go to the file that has been reporting errors to find out why it's reporting errors. The error I'm reporting here is in line 4107, column 15 of app.28653113.js, which is the two numbers after the semicolon on the error prompt [static/js/app.28653113.js:4107,15], and find line 4107, the result is as follows
Because of security issues. I changed the url to xxxx, but the error is obvious. The value of the object is supposed to be a string. That's why it keeps reporting this error. And the setting is easy to find. It's in the config. Of course, other people's errors and my error should not be the same. But to locate the problem, it is easy to solve. This problem really screwed me up all night
It's so bad.
取得元:https://www.cnblogs.com/yuweia/p/10521102.html
関連
-
[解決済み】Webpack: 「ケーシングが異なるだけの名前のモジュールが複数存在する」しかし参照されるモジュールは同一である
-
webpack getaddrinfo ENOTFOUND localhost エラー
-
[解決済み】「import」「export」がトップレベルにしか表示されない場合がある。
-
[解決済み] モジュール 'webpack/bin/config-yargs' が見当たりません。
-
[解決済み] Vue.jsのready()メソッドがvueコンポーネントで呼び出されない
-
[解決済み] bazel と webpack の統合
-
未定義のプロパティ 'properties' を読み取ることができません。
-
Critical dependencyの解決方法:依存関係のリクエストは式?
-
mac install webpack -bash: webpack: コマンドが見つかりませんでした。
-
Webpackの "Invalid Host Header "を解決する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン