[Bug Report] 使用Nuxt Vux搭建的项目，构建后出现兼容性问题Use of const in strict mode | Unexpected keyword 'const'

xieyihao commented 6 years ago

VUX version

2.9.2

OS/Browsers version

华为ALE-CL00 Android 4.4.4 自带浏览器 | iphone5 iOS 8

Vue version

2.5.16

Code

// NavigationBar.vue
<template>
   <tabbar slot="bottom" v-model.number="tabIndex" class="navigation-warp">
      <tabbar-item v-for="(item) in tabList" :key="item.index" :link="item.path" >
        <i slot="icon" ></i>
        <i slot="icon-active"></i>
        <span slot="label">{{item.name}}</span>
      </tabbar-item>
    </tabbar>
</template>

<script>
  import {Tabbar, TabbarItem,  ViewBox  } from 'vux';

  export default {
    name: "NavigationBar",
    components: {
      Tabbar,
      TabbarItem,
    },
    data(){
      return {
        tabList: [{
          index: 0,
          name: '首页',
          path: '/',
         }, {
          index: 1,
          name: '好友',
          path: '/friends',
        }],
        tabIndex: 0
      }
    },
  }
</script>

Steps to reproduce

使用了tabbar组件，看源码该组件使用了src/mixins/multi-items.js，发现用babel构建的时候没有转换成ES5，如图： _20180702171122

项目中有配置babel-polyfill，如下：

//nuxt.config.js
...
  build: {
    babel: {
      presets: ['es2015', 'es2016','es2017','stage-0'],
      plugins: ['transform-runtime'],
    },
    vendor: ['axios', 'babel-polyfill'],  
}
...

一开始以为是nuxt的配置问题，但后面发现自己的项目里都是用ES6写，babel都能成功的编译，翻了Vux的issue也出现一些兼容性问题，但都没有得到跟进而关闭了，结合Nuxt和Vux的项目使用的人不怎么多，没有找到有人有我这种情况。这个问题困了2天了，能力有限，急希望能够得到指点。

What is Expected?

引用的组件里的‘const’ 等ES6的语法可以兼容低版本的移动端浏览器。

What is actually happening?

引用组件有一部分没有将ES6语法转为ES5，,不能兼容低版本的浏览器. tabbar里引入的multi-items.js

xieyihao commented 6 years ago

开心 #2625 ，今天在锲而不舍的搜索中找到了解决方法，这个应该是使用Nuxt+Vux的都会遇到的。

@airyland 大神应该把这个例子发到Nuxt的example里去

前人栽树.后人乘凉...凉凉...

axetroy commented 6 years ago

换一种方式，曲线救国.

自动手动把 es6 转换成 es5

package.json

  "script":{
    "fix": "npx babel-cli ./node_modules/vux/src --presets=env --out-dir ./node_modules/vux/src --copy-files --source-maps inline",
    "postinstall": "npm run fix"
  }

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3",
    "stage-2",
    "stage-1",
    "stage-0"
  ]
}

BoleLee commented 5 years ago

@xieyihao 我用了vue-cli 3.x 搭建的项目，用了vue + vue-router + iview, 在安卓4.4.4的webview中也遇到了同样的报错，报错文件为iview的相关文件，尝试了一些polyfill方案，暂时还没有解决，不知你是怎么解决的，能否提供下思路

xieyihao commented 5 years ago

@BoleLee ,参考 #2625 ，新增.babelrc文件，并配置预处理的js版本。

airyland / vux