Gulp、Vue、Webpack、Babel、Uncaught SyntaxError：予期せぬトークンのインポート

Question

誰かが何らかの光を当てると大変感謝してくれることでしょう。

Webpackを使用してVueと同様にES6ファイルで作業するための環境を設定しようとしています。

私はすべての依存関係をインストールして、以下のファイルを作成しました：

webpack.config.js

module.exports = { 

    entry: './resources/assets/source/js/app.js', 
    output: { 
     filename: 'app.js' 
    }, 
    devtool: 'source-map', 
    resolve: { 
     alias: { 
      'vue$': 'vue/dist/vue.js' 
     } 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015'] 
       } 
      }, 
      { 
       test: /\.vue$/, 
       loader: 'vue' 
      } 
     ] 
    } 
}; 

gulpfile.js

var gulp  = require('gulp'), 
    webpack = require('webpack-stream'); 

gulp.task('script',() => { 

    "use strict"; 

    return gulp.src('./resources/assets/source/js/app.js') 
       .pipe(webpack(require('./webpack.config.js'))) 
       .pipe(gulp.dest('./public/assets/js/')); 

}); 

gulp.task('default', ['script']); 

リソースを/ assets/source/js/app.js

var Vue = require('vue'); 

import Alert from './components/Alert.vue'; 

new Vue({ 

    el: '#app', 

    components: { Alert }, 

    ready() { 
     alert('ready'); 
    } 

}); 

リソース/資産/ソース/ JS /コンポーネント/ Iは、gulpすべてがバンドルされ、コンパイルされたラングが、私は、ブラウザでそれを実行したとき、私はUncaught SyntaxError: Unexpected token importを得るAlert.vue

<template> 

    <div :class="alertClasses" v-show="show"> 
     <slot></slot> 
     <span class="Alert__close" @click="show == false">x</span> 
    </div> 

</template> 

<script> 

    export default { 

     props: ['type'], 

     data() { 
      return { 
       show: true 
      }; 
     }, 

     computed: { 

      alertClasses() { 

       var type = this.type; 

       return { 
        'Alert': true, 
        'Alert--Success': type == 'success', 
        'Alert--Error': type == 'error' 
       }; 

      } 

     } 
    }; 

</script> 

resources/assets/source/js/app.jsファイル内の行を指しています。

何が原因なのか理解しようとしてから、アイデアが足りなくなり、あきらめてしまったので、助けていただければ幸いです。

Answer 1

webpack.config.jsファイルからクエリオブジェクトを削除し、このような内容を含む.babelrcファイルを作成する必要があります。

{ 
    "presets": ["es2015"], 
    "plugins": ["transform-runtime"], 
    "comments": false 
} 

Answer 2

import問題は上記のコメントで解決されているようですが、もう1つあります。

.vue標準のJavaScript構文ではファイルが記述されていないようです。それらをインポートするには、JavaScriptに変換する必要があります。

webpack.config.jsを見ると、.vue拡張子のファイルは何らかの形で変換されません。

カスタムローダーでこの問題を解決できます。この場合は、あなたが探しているローダは、問題を解決するためにvue-loader

手順です： ：一度行わ

• npm install --save-dev vue-loader
• 、以下moduleのセクションであなたのwebpack.config.jsを更新してみてください

  module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } }, { test: /\.vue$/, loader: 'vue' }, ], }

  詳細：

  • http://vue-loader.vuejs.org/en/index.html

  それはどのような方法で助けていますか？そうでない場合は、私に知らせてください。