Question

我使用webpack build 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内但在.babelrc文件中指定babel选项。

1）完全从options删除vue-loader属性，如下所示：

{
  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: {}方法是否可行，但.babelrc方法是由官方vue-cli模板使用的，它也适用于我的自定义设置。

Answer 2

我遇到了同样的问题，我不想实施.babelrc。

首先，您的网络包配置不是vue-loader识别的格式：

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

阅读Vue-loader advanced configuration后，我使用了以下内容：

test: /\.vue$/, 
loader: 'vue-loader', 
options: {
    loaders: {
        js: 'babel-loader'
    }
}

我读到vue-loader检测到babel-loader，所以我认为它会检测到相同的配置，但遗憾的是没有。我的babel-loader看起来像这样：

test: /\.js$/, 
loader: 'babel-loader', 
options: {
    plugins: ['transform-runtime', 'transform-object-rest-spread'],
    presets: ['es2015']
}

除了通过字符串之外，我没有办法指定加载器。所以我尝试了webpack 1.x字符串选项格式，它有效！：

test: /\.vue$/, 
loader: 'vue-loader', 
options: {
    loaders: {
        js: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime'
    }
}

使用UglifyJs

2 个答案: