iview 패키징 시 UglifyJs 오류에 대한 실제 솔루션(자세한 튜토리얼)

이제 iview 패키징 시 UglifyJs 오류 문제를 해결하기 위한 기사를 공유하겠습니다. 좋은 참고 가치가 있으며 모든 분들께 도움이 되기를 바랍니다.

npm run dev를 사용하면 정상적으로 실행되지만 npm run build가 패키지되면 iview에서 오류를 보고합니다.

다음과 같습니다.

이유는 iview는 es6 구문을 사용하지만 uglifyJs는 사용하기 때문입니다. build/webpack.prod.conf.js 파일을 열면

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),

에서 uglifyJs가 es6을 지원하지 않는다는 메시지가 표시되는 것을 볼 수 있습니다.

해결책:

webpack.base.conf. js를 컴파일할 때 먼저 다음을 추가합니다:

{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'),
resolve('test'),resolve('/node_modules/iview/src'),resolve('/node_modules/iview/packages')]
},

먼저 iview의 es6 구문을 babel로 변환한 다음 build/webpack.prod.conf.js에서 원래 uglifyJs를 주석 처리하고 외부 uglifyJs를 도입하여 js를 압축합니다. 난독화됨 , 코드는 다음과 같습니다.

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// },
// sourceMap: config.build.productionSourceMap,
// parallel: true
// }),
new UglifyJsPlugin({
// 使用外部引入的新版本的js压缩工具
parallel: true,
uglifyOptions: {
ie8: false,
ecma: 6,
warnings: false,
mangle: true,
// debug false
output: {
comments: false,
beautify: false,
// debug true
},
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 `console` 语句
// 还可以兼容ie浏览器
drop_console: 
true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: 
true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: 
true,
}
}
}),

물론 외부 플러그인을 먼저 소개해야 합니다.

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

위는 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

웹팩 패키징 후 지나치게 큰 파일에 대한 솔루션에 대한 간략한 토론

Vue+ElementUI로 양식 및 시각적 구성의 동적 렌더링 달성

angularjs는 gulp-uglify를 사용하여 압축 및 보고 실행 후 오류 해결 방법

위 내용은 iview 패키징 시 UglifyJs 오류에 대한 실제 솔루션(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!