Gulp、Vue、Webpack、Babel 和 Uncaught SyntaxError:意外的令牌导入

2022-01-25 00:00:00 javascript vue.js webpack vue-component ecmascript-6

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

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.

我正在尝试设置使用 ES6 文件以及使用 Webpack 的 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']);

资源/资产/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

<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 时，所有内容都已捆绑和编译，但是当我在浏览器中运行它时，我得到 Uncaught SyntaxError: Unexpected token import 指向 gulp 中的行code>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
}

相关文章