質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

801閲覧

babel環境下で"node": "current"を設定したらbuildが通らなくなった

cha627

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/10/30 07:14

編集2020/11/04 10:51

前提・実現したいこと

以下のサイトを参考、Vueの処理でasync/awaitを駆使して非同期処理を実行させておりますが
その時にnpm run buildを実行したところエラーが発生してしまい、これを解消したいです。
https://qiita.com/ryuone/items/13f5d450c3865709ba10

発生している問題・エラーメッセージ

buildを通すと以下のようなエラーが発生します。

ERROR in build.js from UglifyJs Unexpected character '`' [./src/XXXXXXX.js:85,14][build.js:4107,13] npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! ******* build: `cross-env NODE_ENV=production webpack --progress --hide-modules` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the ******* build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\{ユーザ名}\AppData\Roaming\npm-cache\_logs\2020-10-30T01_07_43_526Z-debug.log

babel環境下でプロジェクトを構築しており、.babelrcを以下のように変更させると発生するエラーなのですが
非同期処理を実現する為には、.babelrcを変更前の状態に戻すと動作しない為、色々試しましたが手詰まりになってしまっております。
私の知識不足が原因だと思うのですが、有識者の皆様のアドバイスを頂けますとありがたいです。

変更前
.babelrc

javascript

1{ 2 "presets": [ 3 [ "env", {} 4 } ] 5 ] 6}

変更後
.babelrc

javascript

1{ 2 "presets": [ 3 [ "env", { 4 "targets": { 5 "node": "current" 6 } 7 } ] 8 ] 9}

試したこと

./src/XXXXXXX.js内のエラーに該当されている記述をコメントアウトしたところ、また別のjsファイルの箇所でエラーが発生してしまい、

それをコメントアウトするとまた別のjsファイルで...というようにいたちごっこのようになっています。

.babelrcの内容変更に伴って別の何かをインストールする必要があるのでは、と思っているのですが

参考にできる文献が見当たらず、手をこまねいてしまっています。

XXXXXXX.js

javascript

1 2 3// ACCIDENT: { 4// EVENT: "sample", 5// MSG: `msg 6// msgId:{0} 7// time:{1}`, 8// }, 9

補足情報

"vue": "^2.6.12"
"babel-core": "^6.26.0"
"babel-loader": "^6.0.0"
"babel-preset-env": "^1.6.1"
"cross-env": "^5.1.1"

2020/11/04 追記
node.jsのバージョンはv12.18.3です。

webpackにてbuildを行っております。
以下にwebpack.config.jsの内容を追記します。

webpack.config.js

javascript

1var path = require('path') 2var webpack = require('webpack') 3const ExtractTextPlugin = require("extract-text-webpack-plugin") 4 5module.exports = { 6 entry: './src/main.js', 7 output: { 8 path: path.resolve(__dirname, './dist'), 9 publicPath: '/dist/', 10 filename: 'build.js' 11 }, 12 module: { 13 rules: [ 14 { 15 test: /.vue$/, 16 loader: 'vue-loader', 17 options: { 18 loaders: { 19 } 20 // other vue-loader options go here 21 } 22 }, 23 { 24 test: /.js$/, 25 loader: 'babel-loader', 26 exclude: /node_modules/ 27 }, 28 { 29 test: /.css$/, 30 use: ExtractTextPlugin.extract({ 31 fallback: "style-loader", 32 use: "css-loader" 33 }) 34 }, 35 { 36 test: /.(png|jpg|gif|svg)$/, 37 loader: 'file-loader', 38 options: { 39 name: '[name].[ext]?[hash]' 40 } 41 } 42 ] 43 }, 44 resolve: { 45 alias: { 46 'vue$': 'vue/dist/vue.esm.js' 47 } 48 }, 49 devServer: { 50 historyApiFallback: true, 51 noInfo: true 52 }, 53 performance: { 54 hints: false 55 }, 56 plugins: [new ExtractTextPlugin("main.css")], 57 devtool: '#eval-source-map' 58} 59 60if (process.env.NODE_ENV === 'production') { 61 module.exports.devtool = '#source-map' 62 // http://vue-loader.vuejs.org/en/workflow/production.html 63 module.exports.plugins = (module.exports.plugins || []).concat([ 64 new webpack.DefinePlugin({ 65 'process.env': { 66 NODE_ENV: '"production"' 67 } 68 }), 69 new webpack.optimize.UglifyJsPlugin({ 70 sourceMap: true, 71 compress: { 72 warnings: false 73 } 74 }), 75 new webpack.LoaderOptionsPlugin({ 76 minimize: true 77 }) 78 ]) 79}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

plasticgrammer

2020/11/04 08:13

node.jsのバージョンを追記して頂けると助かります。
plasticgrammer

2020/11/04 10:36

追記ありがとうございました。 追加で確認ですが、buildはwebpackにて行っているという理解で正しいでしょうか。 その場合、webpack.config.js ('babel-loader'に関する設定)を追記頂けますでしょうか。
cha627

2020/11/04 10:52

ご確認頂きありがとうございます。 webpack.config.jsの設定を追記いたしました。
guest

回答1

0

ベストアンサー

webpack.config.jsから、UglifyJsPluginの記述を削除するとどうなるでしょうか。
uglify-jsがES2015(ES6)対応できていないためエラーとなっている可能性があります。

削除でエラーが起きなくなるようなら、uglify-js用にトランスパイル、もしくはuglify-esを使用してみてください。
【webpack】(現時点で)ES2015 (ES6)のままminifyする方法

投稿2020/11/04 11:14

plasticgrammer

総合スコア629

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cha627

2020/11/11 15:01

お返事が遅くなってしまいすみませんでした。 UglifyJsPluginの記述を削除した結果エラーが出なくなったので、uglify-esを使用することで解決することが出来ました。 この度はありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問