Vux: 使用 Cell 组件直接报错

[nigelvon]

Version

npm安装 v0.1.1

Code

<template>
  <div>
    <group>
      <cell title="vue" value="cool"></cell>
    </group>
  </div>
</template>

<script>
  import Group from 'vux/src/components/group'
  import Cell from 'vux/src/components/cell'

  export default {
    components: {
      Group,
      Cell
    }
  }
</script>

Error

Uncaught SyntaxError: Unexpected token export      router.js?bd9a:1

[lichunqiang]

没有完整的错误栈？

[nigelvon]

有的：

(anonymous function)    @   app.js:950
__webpack_require__ @   app.js:556
fn  @   app.js:87
(anonymous function)    @   index.vue?60cd:25
(anonymous function)    @   app.js:926
__webpack_require__ @   app.js:556
fn  @   app.js:87
(anonymous function)    @   index.vue?ccd4:3
(anonymous function)    @   app.js:938
__webpack_require__ @   app.js:556
fn  @   app.js:87
(anonymous function)    @   CellTry.vue?9ce1:13
(anonymous function)    @   app.js:691
__webpack_require__ @   app.js:556
fn  @   app.js:87
(anonymous function)    @   CellTry.vue?5cc7:2
(anonymous function)    @   app.js:769
__webpack_require__ @   app.js:556
fn  @   app.js:87
(anonymous function)    @   App.vue?ac4e:30
(anonymous function)    @   app.js:685
__webpack_require__ @   app.js:556
fn  @   app.js:87
(anonymous function)    @   App.vue?bb67:3
(anonymous function)    @   app.js:763
__webpack_require__ @   app.js:556
fn  @   app.js:87
(anonymous function)    @   main.js?3479:2
(anonymous function)    @   app.js:667
__webpack_require__ @   app.js:556
fn  @   app.js:87
(anonymous function)    @   app.js:587
__webpack_require__ @   app.js:556
(anonymous function)    @   app.js:579
(anonymous function)    @   app.js:582

[nigelvon]

如果直接用 webpack 打包报这个：

ERROR in static/js/vendor.6709cc0cd0685d7daa9c.js from UglifyJs
SyntaxError: Unexpected token: keyword (function) [./~/vux/src/libs/router.js:1,0]

[lichunqiang]

确定是按照文档来的？https://vuxjs.gitbooks.io/vux/content/install/vue.html

感觉你的babel没配置？

[nigelvon]

没错，什么都没改。

试了下 switch 什么的组件没问题，如果 babel 没配置按理来说很多地方都会报错。其他 es6的代码都可以，奇怪。贴一下报错的 js

export function go (url, $router) {
  if (/^javas/.test(url) || !url) return
  const useRouter = typeof url === 'object' || (typeof url === 'string' && !/http/.test(url))
  if (useRouter) {
    $router.go(url)
  } else {
    window.location.href = url
  }
}

export function getUrl (url, $router) {
  // Make sure the href is right in hash mode
  if ($router && !$router._history && typeof url === 'string' && !/http/.test(url)) {
    return `#!${url}`
  }
  return url && typeof url !== 'object' ? url : 'javascript:void(0);'
} //在这一行报错



/*****************
 ** WEBPACK FOOTER
 ** ./~/vux/src/libs/router.js
 ** module id = 62
 ** module chunks = 0
 **/

[lichunqiang]

能否提供在线的代码？我看不出来

[nigelvon]

找到原因了，webpack 配置：

      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },

这是默认的配置，node_modules 被排除了。
如果不排除 node_modules 会报别的错。

[nigelvon]

是否意味着最好用 es5来写npm包。

[nigelvon]

这个问题修么？

[lichunqiang]

不这么意味 :cry: 不会用es5来写

[nigelvon]

那怎么破，如果node_module也用babel解析，这个包就会报错eventsource-polyfill。这是默认带的包。

[nigelvon]

这不是我一个人问题哦，应该都会碰到。

[lichunqiang]

你的node版本是多少, 别人没碰到过吧

[nigelvon]

v4.2.3

[lichunqiang]

你的webpack配置这个试试

 vue: {
    loaders: {
      js: 'babel'
    }
  }

[nigelvon]

和删掉exclude: /node_modules/一样，另一个包报错了。
我试试nodejs v6

[nigelvon]

6也不行~

[lichunqiang]

吧你webpack的配置贴下

[nigelvon]

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    publicPath: config.build.assetsPublicPath,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'vux-components': path.resolve(__dirname, '../node_modules/vux/src/components/')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: utils.cssLoaders()
  }
}

[lichunqiang]

你的webpack配置这个试试

 vue: {
    loaders: {
      js: 'babel'
    }
  }

配置下vue的loader

[nigelvon]

刚才试过了，其他包报错了，和删掉exclude: /node_modules/效果一样

[nigelvon]

我先暂时把 router.js 改成 es5了，貌似没问题，等官方解决方案。

module.exports = {
  go: function (url, $router) {
    if (/^javas/.test(url) || !url) return
    const useRouter = typeof url === 'object' || (typeof url === 'string' && !/http/.test(url))
    if (useRouter) {
      $router.go(url)
    } else {
      window.location.href = url
    }
  },
  getUrl: function (url, $router) {
    // Make sure the href is right in hash mode
    if ($router && !$router._history && typeof url === 'string' && !/http/.test(url)) {
      return `#!${url}`
    }
    return url && typeof url !== 'object' ? url : 'javascript:void(0);'
  }
}

[nigelvon]

我查了一下babel_loader的文档
上面也说要排除node_modules

[unclay]

在loders加上
{
test: /vux.src.*?js$/,
loader: 'babel'
}
@nigelvon 我看到你的webpack的loaders没有加上面那段代码

[airyland]

看了上面讨论还是看不出你有没有按照文档来配置

[nigelvon]

@airyland
@unclay
解决了。我以为这个配置和 vue 的重复就没加，感谢。