WebPACKの私は、このために、WebPACKのビルドVUEを使用してUglifyJsを使用していますが、そのエラー時に使用UglifyJs

Question

xxx.vueビルドエラー：このような

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このため

{ 
    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コード：

このような.config.jsコードビルド後

"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" 
} 

、このようなコード：UglifyJsがエラーになるよう

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

私は、、、ビルド後ES5にそのコードES6 doesntのをindex.jsからhellow.vueファイルを見つけました。 すべてのメソッドを試しましたが、失敗しました。 助けてください、ありがとう。

Answer 1

私はこの問題を自分で解決しました。 .vueファイルにも小節を適用するには、webpack.config.js内では代わりに.babelrcファイル内に小節オプションを指定しないでください。以下で）

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

2）次のpackage.jsonとwebpack.config.jsに、プロジェクトのルート（中.babelrcファイルを作成します。それは次のようになりますので、

1）は完全にvue-loaderからoptionsプロパティを削除します内容：

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

しかし、注意してください：これはですファイル通常のJSONファイルまたはJavaScriptファイル

---

私はあなたのoptions.babel: {}アプローチが動作するようになっているかはわからないが、.babelrcアプローチは公式VUE-CLIテンプレートで使用されると、それはまた私のカスタムセットアップのために動作します。

Answer 2

私は同じ問題を抱えていました。私は.babelrcを実装したくありません。

まず、あなたのWebPACKの設定が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-ローダーという読み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' 
    } 
}