项目场景：

相关背景：

项目场景：项目打包问题使用的node版本是12.xx.xx

问题描述

项目中遇到的问题：

打包出现错误

ERROR in static/js/vendor.24d94e37eec46c49db90.js from UglifyJs
Unexpected token: name (has) [./~/vue-lazyload/vue-lazyload.esm.js:348,0][static/js/vendor.24d94e37eec46c49db90.js:24579,6]Build failed with errors.npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! window@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the window@1.0.0 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\zwkj\AppData\Roaming\npm-cache\_logs\2022-08-31T07_34_43_551Z-debug.log

原因分析：

问题分析：
在 UglifyJs 的 github issues #78 找到了这样一个解决方案：由于 UglifyJs 只支持 ES5 ，部分引入的插件里面包含ES6相关代码
深入查找问题所在后，决定用 bable 来解析，要完成此操作只需要修改前端文件夹下的build/webpack.base.conf.js 文件即可，修改如下：

解决方案：

具体解决方案：

修改前：

module.exports = {entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test')]},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('media/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]}
}

修改后：

module.exports = {entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve("/node_modules/vue-lazyload")]},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('media/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]}
}

UglifyJs打包相关问题相关推荐

配置 html-webpack-plugin 生成预览页面||配置自动打包相关的参数
配置 html-webpack-plugin 生成预览页面 ① 运行 npm install html-webpack-plugin –D 命令,安装生成预览页面的插件 ② 修改 webpack.co ...
转载python2进制打包相关
Python模块--struct(字节流,组包拆包实现) http://www.linuxidc.com/Linux/2014-02/97158.htm [日期:2014-02-24] 来源:Linu ...
react打包成html5,create-react-app项目打包相关问题
Q1. yarn build打包生成的文件直接点击index.html报错,打不开,导致的问题是yarn build打包生成的文件部署到服务器时只能在服务器根目录,如果在其他文件夹里面会报错 A1: ...
air 编译打包相关
本来adobe提供的有个dreamweaver用于打包的插件,但是那个插件实在是太弱智了,只能满足写一个helloword的应用. 用记事本写下面三个bat文件. 1.将工程打包成一个单独的exe安装 ...
android 打包相关问题记录
Android 中的打包配置在build.gradle文件中,下面对该文件的内容做一下记录. buildscript {repositories {jcenter()}dependencies {cl ...
cocos 安卓打包相关
使用mac进行开发的时候,有时候需要使用adb指令来进行一些操作,但是如果1没有配置过Android环境变量2更新mac系统3升级zsh 可能会出现adb: command not found的问题, ...
游戏开发unity打包相关系列：使用IL2CPP时打包windows程序出现Currently selected scripting backend (IL2CPP) is not installed
安装对应平台需要的构建支持
vue-cli3以后，关于webpack打包等的相关配置
vue-cli3以后,关于webpack打包等的相关配置最近刚入职一家新的公司,接手了一个新的项目!做一个人脸系统相关的后台管理系统!领导让我选择自己拿手的技术框架,我毫不犹豫的选择了 vue-cl ...
自动打包Shell脚本
简介 iOS应用自动化打包,可以给开发者带来无穷的便利.节省了不少时间. 作者Bruce的脚本,放到Github BashShell上了另外Bryce Zhang童鞋总结了一篇:传送门 Build+ ...

UglifyJs打包相关问题

项目场景：

问题描述

原因分析：

解决方案：

UglifyJs打包相关问题相关推荐

最新文章

热门文章