前提・実現したいこと
以下のサイトを参考、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}
回答1件
あなたの回答
tips
プレビュー