使用UglifyJs时webpack构建xxx.vue错误

Question

我使用 webpack 构建 vue 并使用 UglifyJs，但它的错误，为此:

ERROR in index.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [index.js:386,6]

hello.vue 代码如下:

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

webpack.config.js 代码如下:

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        babel: {
            babelrc: false,
            presets: ['es2015', "stage-2"],
            plugins: ['babel-plugin-transform-runtime']
        }
}
...

new webpack.optimize.UglifyJsPlugin({
    sourceMap: false,
    mangle: false,
    compress: {
        warnings: false
        drop_console: true
    }
})

package.json 代码:

"dependencies": {
    "autoprefixer": "^6.6.1",
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "sass-loader": "^4.1.1",
    "url-loader": "^0.5.7",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^10.0.2",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.9",
    "vue": "^2.1.8"
}

构建后，代码如下:

/* harmony default export */ exports["default"] = {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};

我发现构建后，hellow.vue文件转换为index.js，它的代码ES6没有转换为ES5，所以UglifyJs是错误的。 我尝试了所有的方法，但都失败了。 请帮助我，谢谢。

Answer 1

我刚刚自己解决了这个问题。要将 babel 应用于 .vue 文件，您不能在 webpack.config.js 中指定 babel 选项，而是在 .babelrc 文件中指定.

1) 从 vue-loader 中完全删除 options 属性，使其看起来像这样:

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

2) 在项目根目录中创建一个 .babelrc 文件(位于 package.json 和 webpack.config.js 旁边) )包含以下内容:

{
  "presets": [
    ["es2015"],
    ["stage-2"]
  ],
  "plugins": ["babel-plugin-transform-runtime"],
  "comments": false
}

但请注意:这是 JSON5文件，不是普通的 JSON 文件或 JavaScript 文件!

<小时/>

我不确定您的 options.babel: {} 方法是否应该有效，但官方 vue-cli 模板使用了 .babelrc 方法，并且它也适用于我的自定义设置。