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

打包生产使用UglifyJs报错 #1279

Closed
gefangshuai opened this Issue Jul 2, 2017 · 17 comments

Comments

Projects
None yet
6 participants
@gefangshuai

gefangshuai commented Jul 2, 2017

iView 版本号

操作系统/浏览器 版本号

Vue 版本号

能够复现问题的在线示例(bug 相关不提供在线示例将直接 close)

复现步骤

执行

npm run build

问题现象,以及你期望的结果是怎样的?

报错如下:

ERROR in static/js/vendor.0c3d1d37ce9c9f59d4dc.js from UglifyJs
Unexpected token: operator (>) [./~/._iview@2.0.0-rc.17@iview/src/components/base/notification/index.js:4,0][static/js/vendor.0c3d1d37ce9c9f59d4dc.js:82084,84]

你估计可能的原因是什么(选填)?

请问怎么解决呢?

@huixisheng

This comment has been minimized.

Contributor

huixisheng commented Jul 3, 2017

你是用vue-cli初始化的项目,iView当做模块去构建吗?如何是这样,iView已经用babel转换过了,需要在配置用忽略;如果不是,麻烦提供具体的描述。

@treasureDouDou

This comment has been minimized.

treasureDouDou commented Jul 9, 2017

@huixisheng 同打包报错,如何在配置用忽略?

@treasureDouDou

This comment has been minimized.

treasureDouDou commented Jul 9, 2017

vue-cli初始化的项目,iView当做模块构建的,报iveiw的assist.js没有转es5——版本2.0.0-rc.18

@treasureDouDou

This comment has been minimized.

treasureDouDou commented Jul 9, 2017

开发没问题,打包就不行 @huixisheng

@treasureDouDou

This comment has been minimized.

treasureDouDou commented Jul 9, 2017

@gefangshuai 大哥解决没有

@gefangshuai

This comment has been minimized.

gefangshuai commented Jul 10, 2017

@dspangenberg 没解决

@treasureDouDou

This comment has been minimized.

treasureDouDou commented Jul 10, 2017

@gefangshuai 我是手动去吧assist.js改成es5的,才打包起

@dspangenberg

This comment has been minimized.

Contributor

dspangenberg commented Jul 10, 2017

@gefangshuai Sorry, I don't understand Mandarin. Could I help you?

@weirDozzz

This comment has been minimized.

weirDozzz commented Jul 11, 2017

@gefangshuai 同问题,使用的是iview单组件的按需引入,babel配置也按照文档的添加了,报上面的错误,发现es6代码并没有被转换为es5,导致UglifyJs压缩混淆出错。亲测去掉iview组件的引入则编译通过
module: {
rules: [
{ test: /iview.src.*?js$/, loader: 'babel' },
{ test: /.js$/, loader: 'babel', exclude: /node_modules/ }
]
}

@gefangshuai

This comment has been minimized.

gefangshuai commented Jul 11, 2017

@q313729286 请问在哪个文件里改?

@huixisheng

This comment has been minimized.

Contributor

huixisheng commented Jul 12, 2017

可以在这里.babelrc添加配置

{
 ...
 "ignore": [
    "iview.js"
 ]
}

@gefangshuai
或者@q313729286 提到的配置应该在build/webpack.base.conf.js

@gefangshuai

This comment has been minimized.

gefangshuai commented Jul 12, 2017

@huixisheng 谢谢,我已经将view的src通过源码的方式放到项目中,感觉这样更可控一些

@weirDozzz

This comment has been minimized.

weirDozzz commented Jul 12, 2017

@gefangshuai @huixisheng 因为使用iview单组件,不想整个引入iview,所以必须使用iview的src代码,但是src目录下的但是都是es6的写法,所以babel配置肯定需要,所以ignore配置肯定不行。另外测试发现按照官方的配置,在部分服务器上编译没问题,在我本地的mac上也没问题,但是在QA服务器上编译不通过,iview的组件代码没有被转换为es5语法,导致UglifyJs压缩混淆错误。而且发现另外一个问题,编译不通过的服务器编译出来的文件跟本地mac环境和其他服务器环境不一致,vendor.js没有生成,而是被合并放在了app.js里,先后在QA的两台服务器上测试,都是同样的问题,系统为centos。

@weirDozzz

This comment has been minimized.

weirDozzz commented Jul 12, 2017

@gefangshuai @huixisheng 而且测试发现使用vue.use(iview)的方式引入iview的话,会导致打包后的文件特别大。
使用import Switch from 'iview/src/components/switch';单组件引入方式:
image
使用vue.use(iview)方式(压缩后的完全版iview不也才70+kb的大小吗?):
image

@huixisheng

This comment has been minimized.

Contributor

huixisheng commented Jul 12, 2017

@q313729286 可以尝试在QA的服务器上删除node_modules,重新安装依赖。多出344kb,没有gzipiview344,699B70+kb是gzip的,所以打包后台的大小是正常的

@q27488

This comment has been minimized.

q27488 commented Aug 18, 2017

最近我在vue-cli项目部署线上在IE浏览器下直接白屏,报语法错误,找了很多方法,怀疑到了 npm run build中的 iview打包出错,看上面各位Gay友的回复,就更确定了: iview按需引入导致iview的组件为能将es6打包成es5导致, 那么问题来了,该怎么解决!!?

@q27488

This comment has been minimized.

q27488 commented Aug 19, 2017

承接上一个问题,如何解决:
首先问题
用了 iview UI库,但是是按需加载的,然后默认的vue-cli无法对 按需加载的iview的js库进行 babel语法转意。 所以一到低版本浏览器就白屏(报语法错误)
解决方法如官网所示:

module: {
    rules: [
        { test: /iview.src.*?js$/, loader: 'babel' },
        { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    ]
}

但这个官网用的babel现在的已经不支持,应该用这个:

//使用iview部分插件
      { test: /iview.src.*?js$/, loader: 'babel-loader' },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment