vue-cli 项目 build失败

Question

vue-cli创建的项目,run dev可以启动,run build报如下错

ERROR in static/js/vendor.a404221534e20a3325d8.js from UglifyJs
Unexpected token: name (liveElements) [./~/countable/Countable.js:25,0][static/js/vendor.a404221534e20a3325d8.js:14660,6]

按照网上的说法,修改过一些babelrc文件.修改后如下,依旧报错,同一个

{
  "presets": [
    ["env", {
      "modules": false,
//      "modules": "es2015",
//      "targets": {
//        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
//      }
      "targets": "es5"
    }],
    "es2015"
//    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env","es2015"],
      "plugins": ["istanbul"]
    },
    "build": {
      "presets": ["env","es2015"],
      "plugins": ["transform-runtime"]
    }
  }
}

报错位置附近代码为:

  
  /**
   * @private
   *
   * `liveElements` holds all elements that have the live-counting
   * functionality bound to them.
   */

  let liveElements = []
  const each = Array.prototype.forEach

  /**
   * `ucs2decode` function from the punycode.js library.
   *
   * Creates an array containing the decimal code points of each Unicode
   * character in the string. While JavaScript uses UCS-2 internally, this

目测为countable代码.countable项目地址为:https://github.com/RadLikeWho...
vue引入countable方式为:

import Countable from 'countable'
Vue.use(Countable)
Object.defineProperty(Vue.prototype, '$Countable', { value: Countable })

谢谢大家!

Answer 1

这是babel没编译js引起的，UglifyJs不支持直接压缩es6代码

我估计你引入的countable这个库是用es6写的，并且没有编译，而且一般的babel配置也不会编译依赖库中的代码

---

我刚才确认了下，Countable的package.json中的"main"是countable.js而不是countable.min.js，也就是说你import进来的就是没编译的es6代码，并且babel也不会处理它

你应该修改一下webpack配置文件中关于babel的配置

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

在include里加上countable

---

如果一下子弄不好，你也可以直接下载Countable.min.js，然后把它import进来，反正就这么一个文件，挺小的