Question

我一直在努力让它在没有任何运气的情况下工作，所以如果有人可以发出一些非常感激的光。

我尝试使用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'
            }
        ]
    }
};

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

资源/资产/来源/ JS / app.js

var Vue = require('vue');

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

new Vue({

    el: '#app',

    components: { Alert },

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

});

资源/资产/来源/ JS /组件/ 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指向resources/assets/source/js/app.js文件中的行。

经过几个小时试图找出可能造成这种情况的原因后，我已经没有了想法，而且我已经濒临放弃，所以我将不胜感激。

Answer 1

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

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

Answer 2

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

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

在查看您可能会注意到的webpack.config.js时，.vue扩展名的文件不会以任何方式进行转换。

您可以使用自定义加载器解决此问题。在这种情况下，您正在寻找的加载程序是vue-loader

解决问题的步骤：

npm install --save-dev vue-loader
完成后，请尝试使用以下webpack.config.js部分更新module：

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

更多详情：

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

以任何方式有帮助吗？如果没有，请告诉我。

Gulp，Vue，Webpack，Babel和Uncaught SyntaxError：意外的令牌导入

2 个答案: