Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

uglify 压缩报错问题及 es5-imcompatible-versions #68

Open
sorrycc opened this issue Apr 13, 2018 · 42 comments
Open

uglify 压缩报错问题及 es5-imcompatible-versions #68

sorrycc opened this issue Apr 13, 2018 · 42 comments
Labels

Comments

@sorrycc
Copy link
Owner

sorrycc commented Apr 13, 2018

视频版:youtube | bilibili

缘起

由于维护 roadhog 和 umi,收到构建方面的问题反馈比较多,其中一个常见的是打包时 uglify 压缩的问题。类似下面的报错都是这个引起的,

Failed to minify the bundle. Error: 0.0f3f4c41.async.js from UglifyJs

xx.async.js from UglifyJs Unexpected token: keyword (const)

0.570d21b1.async.js from UglifyJs
Unexpected token: punc ()) [0.570d21b1.async.js:13245,19]

xx.async.js from UglifyJs Unexpected token: operator (>)

为啥会有这个问题?

通常 webpack 在构建时,是不会让 node_modules 下的文件走 babel tranpile 的,一是会慢很多,二是 babel@6 时编译编译过的代码会不安全(据说 babel@7 下没问题了),所以业界有个潜在的约定,npm 包发布前需要先用 babel 转出一份 es5 的代码

但是有些 npm 包不遵守这个约定,没有转成 es5 就发上去,比如 query-string@6。然后压缩工具 uglify 又只支持 es5 的语法,遇到 constlet()=> 类似的语法,就抛错了。

解决

有多个解决方法,但各有利弊。

使用 uglify-es 进行压缩

uglify-es 支持 es6 语法,所以不会报错。但问题是如果你需要在 IE11 及以下,或者其他的低版本浏览器里跑时,就会报错、白屏了。

让 babel 编译 node_modules 下的文件

由于 babel@7 可以保证编译编译过的代码不会出问题,这不失为一个好的解决方案,比如 create-react-app 会在下个版本考虑用这个方案,参考 facebook/create-react-app#3776。问题是会让本来就比较慢的 dev、build 流程雪上加霜。

babel-engine-plugin

跟进 npm 包的 engine 配置做按需编译。缺点是使用者比较少,如果 npm 包开发者不遵循这个规则一样会出问题。

umi/roadhog 提供的 extraBabelIncludes 配置

umi/roadhog 默认也是仅用 babel 编译项目文件,但提供了额外的 extraBabelInclude 配置可以指定 node_modules 下的文件。比如:

{
  "extraBabelIncludes": [
    "node_modules/a",
    "node_modules/b"
  ]
}

问题是无法提前预知,都是出错了一脸那啥,翻 issue 或者提问后才知道。而且找到哪个依赖用了 es6 语法也比较麻烦。

所以,有没有一种能提前预知(用户无感知),并且不降低 webpack 构建速度的方案?

es5-imcompatible-versions

经过讨论,我们建了一个 es5-imcompatible-versions,用于收集 uglify 压缩有问题的 npm 包版本。然后再提供配套工具,自动 resolve 到项目里有问题的 npm 包路径,添加到 babel-loader 的 include 参数里。

然后,

  • 遇到已被收录的 es6 包,会自动走 babel 编译
  • 遇到未被收录的,在 es5-imcompatible-versions 提 PR,被合并发布后,重装 npm 依赖再构建,自动生效

umi

确保 umi 在 1.2.4 或以上,然后在 .webpackrc 里配:

export default {
  es5ImcompatibleVersions: true,
}

roadhog

确保 roadhog 在 2.4.0-beta.3 或以上,然后在 .webpackrc 里配:

export default {
  es5ImcompatibleVersions: true,
}

参考这个使用了 query-string@6 和 get-value@3 的例子,https://github.com/umijs/umi-examples/tree/master/es5-imcompatible-versions


最后,这事情是否能做成,就靠大家一起共建了。

参考

@afc163
Copy link

afc163 commented Apr 13, 2018

uglify-bug-versions => es5-imcompatible-versions ?

@sorrycc
Copy link
Owner Author

sorrycc commented Apr 13, 2018

@afc163 ok,es5-incompatible-versions

@sorrycc sorrycc changed the title uglify 压缩报错问题及 uglify-bug-versions uglify 压缩报错问题及 es5-incompatible-versions Apr 13, 2018
@afc163
Copy link

afc163 commented Apr 13, 2018

- incompatible
+ imcompatible

@sorrycc sorrycc changed the title uglify 压缩报错问题及 es5-incompatible-versions uglify 压缩报错问题及 es5-imcompatible-versions Apr 13, 2018
@afc163
Copy link

afc163 commented Apr 13, 2018

是不是构建前这些前置判断也加上:http://2ality.com/2017/04/setting-up-multi-platform-packages.html

@ikobe-zz
Copy link

酷,经常能收到这样的问题。。以后可以直接贴这篇了

@lusess123
Copy link

其实说到底最根本的问题是:

编译太慢!

因为大家觉得npm包应该是只读的,重新编译确实没有太大必要。

但是其实,npm包不光是为了发布,而是为了做模块化代码分离,很多业务模块单独成一个包,并没有想着要publish,而是用lerna在本地进行代码管理,类似于一个文件夹,这个阶段,基础包源码变更是很频繁的,其实比起 "首次编译时间长" 更差的体验是 "每次修改都要重新启动打包编译" 无法HRM .

另外,解决方案的问题是 ,识别是否需要转义,es5-imcompatible-versions 和extraBabelIncludes 用的是 白名单机制 ,其实,有时候源码不一定是es6的, 也有可能是*. ts ,.tsx,.less ,*.vue 我不一定要用babel啊, 碰到这种类型的扩展文件,直接让我转不就好了,反正这种文件也不会太多的。

@sorrycc
Copy link
Owner Author

sorrycc commented Apr 20, 2018

. ts ,.tsx,.less ,.vue 我不一定要用babel啊, 碰到这种类型的扩展文件,直接让我转不就好了

node_modules 下的 .less 是有编译的,不走 css modules。.tsx? 有需要可以提 PR,我觉得全量编译是可以的。

@lusess123
Copy link

@sorrycc 感谢回复 ……^_^ , 这个PR 只需要去掉 exclude: /node_modules/, 就可以了吧

@sorrycc
Copy link
Owner Author

sorrycc commented Apr 27, 2018

deprecate,见下贴。

更新 umi 对于 es5-imcompatible-versions 的实现。

umi-plugin-es5-imcompatible-versions

umi 的用户遇到这个问题,可通过添加插件自动解决。

编辑 .umirc.js

export default {
  plugins: [
    'umi-plugin-es5-imcompatible-versions',
  ],
}

参考这个使用了 query-string@6 和 get-value@3 的例子,https://github.com/umijs/umi-examples/tree/master/es5-imcompatible-versions

@sorrycc
Copy link
Owner Author

sorrycc commented Apr 28, 2018

更新:

umi

确保 umi 在 1.2.4 或以上,然后在 .webpackrc 里配:

export default {
  es5ImcompatibleVersions: true,
}

roadhog

确保 roadhog 在 2.4.0-beta.3 或以上,然后在 .webpackrc 里配:

export default {
  es5ImcompatibleVersions: true,
}

参考这个使用了 query-string@6 和 get-value@3 的例子,https://github.com/umijs/umi-examples/tree/master/es5-imcompatible-versions

@zhanchengkun
Copy link

D:\ybx2\wx>umi -v
1.2.6
在执行完 umi如上修改,
.umirc.js
export default {
plugins: [
'umi-plugin-es5-imcompatible-versions',
],
}
.webpackrc.js
export default {
es5ImcompatibleVersions: true,
}
后问题依旧.只是npm run build 跟 直接 umi build 错误信息不同
1.
package.json
"scripts": {
"build": "umi build",
},

D:\ybx2\wx>npm run build

@ build D:\ybx2\wx
umi build

D:\ybx2\wx\node_modules_af-webpack@0.19.0@af-webpack\lib\getUserConfig\index.js:54
throw new Error(msg);
^
Error: Configuration item es5ImcompatibleVersions is not valid, please remove it.
at throwError (D:\ybx2\wx\node_modules_af-webpack@0.19.0@af-webpack\lib\getUserConfig\index.js:54:9)

D:\ybx2\wx>umi build
build [================== ] 91%Skipping static resource "D:/ybx2/wx/dist/static/1.b829935f.async.js" (8.9 MB) - max size is 2.1 MB
Skipping static resource "D:/ybx2/wx/dist/static/2.ba84922c.async.js" (8.77 MB) - max size is 2.1 MB
Total precache size is about 5.38 MB for 35 resources.
Build completed in 49.549s

Failed to compile.

Failed to minify the bundle. Error: 1.b829935f.async.js from UglifyJs
Unexpected token: name (matches) [1.b829935f.async.js:1102,5]
at doneHandler (C:\Users\zhanck\AppData\Roaming\npm\node_modules\umi\node_modules\af-webpack\lib\build.js:91:27)

@sorrycc 该如何配置求教

@pengshaosu
Copy link

pengshaosu commented Oct 17, 2018

@sorrycc
roadhog@2.4.5 配置了babel node_modules,依然报错

    "env": {
    "production": {
      "es5ImcompatibleVersions": true,
      "extraBabelIncludes": [
        "node_modules/*"
       ]
     }
  }
Failed to minify the bundle. Error: index.js from UglifyJs
Unexpected token name «p», expected punc «;» [index.js:399,17]
    at doneHandler (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\af-webpack\lib\build.js:91:27)
    at emitRecords.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:265:13)
    at Compiler.emitRecords (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:371:38)
    at emitAssets.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:258:10)
    at applyPluginsAsyncSeries1.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:364:12)


@pengshaosu
Copy link

@sorrycc
roadhog@2.4.5 配置了babel node_modules,依然报错

    "env": {
    "production": {
      "es5ImcompatibleVersions": true,
      "extraBabelIncludes": [
        "node_modules/*"
       ]
     }
  }
Failed to minify the bundle. Error: index.js from UglifyJs
Unexpected token name «p», expected punc «;» [index.js:399,17]
    at doneHandler (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\af-webpack\lib\build.js:91:27)
    at emitRecords.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:265:13)
    at Compiler.emitRecords (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:371:38)
    at emitAssets.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:258:10)
    at applyPluginsAsyncSeries1.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:364:12)

解决了!找到使用了es5的npm包,然后换了一个版本

@xgj1988
Copy link

xgj1988 commented Nov 14, 2018

es5-imcompatible-versions 在 umijs 2.x以上如何使用呢?

@xiaohuoni
Copy link

@BruceChoca
Copy link

只能说很赞了 顶一个

@sorrycc
Copy link
Owner Author

sorrycc commented Dec 6, 2018

问的人比较多,录了个视频,https://www.youtube.com/watch?v=z4pWFpPiIoc

@jrschumacher
Copy link

@sorrycc I have a PR for sorrycc/roadhog#844 which implements the af-webpack support of TerserJS (documentation)

@zjjjjjjjjjjd
Copy link

@sorrycc
roadhog@2.4.5 配置了babel node_modules,依然报错

    "env": {
    "production": {
      "es5ImcompatibleVersions": true,
      "extraBabelIncludes": [
        "node_modules/*"
       ]
     }
  }
Failed to minify the bundle. Error: index.js from UglifyJs
Unexpected token name «p», expected punc «;» [index.js:399,17]
    at doneHandler (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\af-webpack\lib\build.js:91:27)
    at emitRecords.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:265:13)
    at Compiler.emitRecords (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:371:38)
    at emitAssets.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:258:10)
    at applyPluginsAsyncSeries1.err (E:\sourcecode\project_MedicalServices\01code\msp\node_modules\webpack\lib\Compiler.js:364:12)

解决了!找到使用了es5的npm包,然后换了一个版本

如何找到es5的包呢?我再报错信息中看不出来

@shenqihui
Copy link

image
我用了 uglify es 版本,详情如图。应为用 babel 的话,压缩了导出会有问题。mark下到这里。

@Whilconn
Copy link

Whilconn commented Jun 7, 2020

@sorrycc 移动端项目依赖swiper,在ios9浏览器中白屏,使用如下配置后正常

// .umirc.ts
export default {
  nodeModulesTransform: {
    type: 'none',
    exclude: ['swiper', 'dom7'],
  },
};

swiper 官网说明 如下图

image

@baobao12356
Copy link

image
image
不起作用??为什么

@baobao12356
Copy link

参考这个使用了 query-string@6 和 get-value@3 的例子,https://github.com/umijs/umi-examples/tree/master/es5-imcompatible-versions

这个打开是404
Uploading image.png…

@baobao12356
Copy link

大佬。已经在es5-imcompatible-versions 里加包了,
Uploading image.png…
还是报错
image
Uploading image.png…

@wangmeijian
Copy link

TerserWebpackPlugin,webpack5自带

@AlanKnightly
Copy link

@baobao12356 您好,我这边也遇到了这个问题,请问怎么解决的呢?我已经折腾一早上了。。。

@wangbadanaaa
Copy link

加了es5ImcompatibleVersions: true,但是打包还是报错,有没有解决的小伙伴,
截屏2022-12-05 下午3 49 25

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests