web-dev-qa-db-ja.com

UglifyJsからのbundle.jsのエラー

私はプロジェクトを完了し、今それを構築する時が来ました。ボイラープレートプロジェクトを使用していますが、内部で行われているすべてのnpm/webpackの内容を完全には理解していません。 「npm start」を実行すると、次のエラーが表示されます。

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [bundle.js:848,29]

この問題について1時間インターネットを検索した後、それでも解決できません。私の理解では、この問題はUglifyがES2016をまだ好まないために発生しています。しかし、インターネットで見つけたソリューションは機能していないか、実装するのに十分な意味がありません。

私はこれを見つけました stackoverflow question と私のプロジェクトのpackage.jsonファイルのwebpack行を変更しました：

"webpack": "fulls1z3/webpack#v2.1.0-beta.27-harmony"

しかし、これはうまくいきませんでした。 webpackをフォークするという他の提案は、現時点では理解できません。

また、srcフォルダーで別の提案に従ってbabelを実行してみましたが、何も実行されなかったか、正しく実行されなかったようです。

誰かがこの問題の素晴らしい解決策を持っていますか？私は現時点でかなり立ち往生しており、何が起こっているのかを完全に把握するためにnpm/webpackを一から学ぶ時間はありません。

とても有難い！

javascriptnode.jsnpmwebpackuglifyjs
9
Charlie Harrison

はい、UglifyJSはES5構文のみをサポートしています。ソースをES5構文に変換するには、Babelを正しく設定する必要があります。

Webpack 2を使用しているため、必要な最低限のBabel構成は次のとおりです。

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

babel-preset-es2015 プリセット。上記を.babelrc そしてあなたの babel-loaderが残りを処理します。

または、 babelify を試すこともできます。これは、ES6構文をサポートするBabelの最新の縮小版です。新しいリリースをターゲットにしている場合は、心からお勧めします。

9
Filip Dupanović

私のcfg、actualityを試してみてください https://github.com/joeeames/WebpackFundamentalsCourse/issues/ で答えを見つけます

npm install babel --save-dev

npm install babel-preset-es2015 --save-dev

 {
 test：/\.js$/,
 exclude：/(node_modules|bower_components)/,
 use：{
 loader： 'babel-loader'、
クエリ：{
プリセット：["es2015"] 
} 
} 
}、
2
congzhaoyang

この回答は古くなっている可能性があります。他の回答へのコメント here を参照してください。

単にUglifyJS ES6を教える

UglifyJSには2つのバージョンがあります-ES5とES6（Harmony）、 gitを参照
ES5バージョンにはデフォルトですべてのプラグインが付属していますが、Harmonyバージョンを明示的にインストールすると、それらのプラグインは代わりにそれを使用します。

package.json

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"

または

npm install --save uglify-js@github:mishoo/UglifyJS2#harmony

yarn add git://github.com/mishoo/UglifyJS2#harmony --dev

UglifyJS WebPackプラグイン

Webpackプラグインのバージョンを制御したい場合は、明示的にインストールして使用する必要があります。これはビルドされたwebpack.optimize.UglifyJsPlugin

npm install uglifyjs-webpack-plugin --save

yarn add uglifyjs-webpack-plugin

Webpack構成ファイル

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    new UglifyJSPlugin()
  ]
};

Webpackの詳細については、
https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install
https://github.com/mishoo/UglifyJS2/tree/harmony

2
Qwerty
npm i -D [email protected]

これをwebpack.confの先頭に追加します。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

そしてこれを置き換えます：

new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    }),

これで：

new UglifyJsPlugin({
            "uglifyOptions":
                {
                    compress: {
                        warnings: false
                    },
                    sourceMap: true
                }
        }
    ),
1
Krishna Gawali

私の場合、私はsourceMap:falseを変更しましたので、エラーは次のようになりました

ERROR in index.bundle.js from UglifyJs

TypeError: Cannot read property 'sections' of null.

ここで、sourceMap:trueを変更します。

それはうまくいきました。

new webpack.optimize.UglifyJsPlugin({ sourceMap: true}),
0
Prashant Yalatwar

.babelrcファイルをフォルダーのルートに追加します。

{
 "presets": [
    "es2015"
 ]
}
0
Carlos Aleman