Javascript Gulp、Vue、Webpack、Babel和未捕获的SyntaxError:意外的令牌导入

我一整天都在努力让它在没有任何运气的情况下工作，所以如果有人能发光，我将不胜感激

我正在尝试设置环境，以便使用Webpack处理ES6文件和Vue

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

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

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

var Vue = require('vue');

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

new Vue({

    el: '#app',

    components: { Alert },

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

});

gulpfile.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'
            }
        ]
    }
};

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

var Vue = require('vue');

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

new Vue({

    el: '#app',

    components: { Alert },

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

});

resources/assets/source/js/app.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'
            }
        ]
    }
};

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

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

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

x
导出默认值{
道具：['type']，
数据（）{
返回{
秀：真的
};
},
计算：{
alertClasses（）{
var type=this.type；
返回{
“警惕”：正确，
“警报--成功”：类型==“成功”，
“警报--错误”：类型==“错误”
};
}
}
};

当我运行

gulp

时，所有内容都被绑定和编译，但当我在浏览器中运行它时，我会得到

未捕获的语法错误：意外的令牌导入

，指向

resources/assets/source/js/app.js

文件中的行

---

经过数小时的努力，我终于想不出是什么原因导致了这种情况。我已经没有主意了，快要放弃了，所以非常感谢您的帮助。

import

问题似乎在上面的评论中得到了解决，但还有一个问题

.vue

文件似乎不是用标准JavaScript语法编写的。为了导入它们，我们需要以某种方式将它们转换为JavaScript

查看

webpack.config.js

时，您可能会注意到，扩展名为

.vue

的文件不会以任何方式传输

您可以使用自定义加载程序解决此问题。在本例中，您要查找的加载程序是

解决问题的步骤：

• npm安装--保存dev vue加载程序

• 完成后，请尝试使用以下

  模块

  部分更新您的

  webpack.config.js

  ：

模块：{
装载机：[
{
测试：/\.js$/,，
加载器：“巴别塔加载器”，
查询：{
预设值：['es2015']
}
},
{
测试：/\.vue$/,，
加载程序：“vue”
},
],
}

更多详情：

---

这有什么帮助吗？如果没有，请告诉我。

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

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

---

你使用哪个版本的Babel和Webpack？它的Webpack-stream@3.2.0巴贝尔呢-loader@6.2.7Try删除

'/\（js|vue）中的引号$/'

-当您希望将其作为正则表达式时，它可能会被解析为字符串。使用for

.vue

文件，而不是Babel，方法是在

webpack.config.js

中的

加载程序列表中添加另一个元素。您能用最新的配置更新帖子吗？谢谢@Maciej-恐怕这没有解决问题。如果加载程序是
vue
或
vue加载程序
？Hi@seb，请重试。在加载程序测试中，我没有去掉不必要的撇号，代码现在已经更新了。是的，我的代码与您的示例中的代码完全相同，但是我恐怕没有任何运气。这里有一个使用
vue加载程序的
webpack.config.js
示例文件：和一个
.vue
示例组件：这样你就可以比较你的设置了谢谢@Belmin-这就成功了！它在没有
转换运行时的情况下工作。通过从
babel
加载程序中删除
query
块，并使用预设值添加
.babelrc
，可以产生一种魅力@Belmin你能把它作为一个答案添加进来，这样我就可以接受了吗？它也可以在没有
转换运行时的情况下正常工作
-谢谢@Belmin