Gulp，Vue，Webpack，Babel和Uncaught SyntaxError：意外的令牌导入 [英] Gulp, Vue, Webpack, Babel and Uncaught SyntaxError: Unexpected token import

问题描述

我一直在努力工作，没有任何运气，所以如果有人可以照亮一些非常感激的光。

I've been trying whole day to get it to work without any luck so if someone could shine some light that would be very much appreciated.

我是尝试使用Webpack设置ES6文件以及Vue的环境。

I'm trying to set up environment for working with ES6 files as well as Vue using Webpack.

我已经安装了所有依赖项，并创建了以下文件：

I've installed all dependencies, and created the following files:

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']);

resources / assets / source / js / app.js

var Vue = require('vue');

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

new Vue({

    el: '#app',

    components: { Alert },

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

});

resources / assets / source / js / components / Alert.vue / p>

resources/assets/source/js/components/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>

当我转过来 gulp 编译，但是当我在浏览器中运行时，我得到未捕获的SyntaxError：意外的令牌导入指向 resources / assets / source / js中的行/app.js 文件。

When I rung gulp everything is bundled and compiled, but when I run it in the browser I get Uncaught SyntaxError: Unexpected token import pointing to the line within the resources/assets/source/js/app.js file.

在尝试弄清楚可能导致什么的几个小时后，我已经用完了想法，

After hours of trying to figure out what might be causing it I've run out of ideas and am on the verge of giving up so would appreciate any help.

推荐答案

您应该从webpack.config.js文件中删除查询对象，并创建包含这些东西的.babelrc文件。

You should remove query object from your webpack.config.js file, and create .babelrc file, that would contain this stuff.

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

这篇关于Gulp，Vue，Webpack，Babel和Uncaught SyntaxError：意外的令牌导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！