Gulp、Vue、Webpack、Babel和Uncaught SyntaxError：Unexpected token import

Question

我整天都在尝试让它工作，但没有成功，如果有人能帮忙指点一下，那将不胜感激。

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

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

<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时，所有内容都会被打包和编译，但是当我在浏览器中运行它时，指向resources/assets/source/js/app.js文件中的某一行，出现了Uncaught SyntaxError: Unexpected token import错误。

经过数小时的尝试仍然无法找到原因，我已经快要放弃了，希望能得到任何帮助。

- Sebastian Sulinski

---

它是webpack-stream@3.2.0和babel-loader@6.2.7。 - Sebastian Sulinski

尝试从'/\.(js|vue)$/'中删除引号 - 当您需要将其作为正则表达式时，它可能会被解析为字符串。 - Aurora0001

感谢@Aurora0001 - 这绝对是第一步 :). 现在当我运行gulp时，会出现错误提示“Error: ./resources/assets/source/js/components/Alert.vue Module build failed: SyntaxError: Unexpected token (1:0)”，指向<template>标签。 - Sebastian Sulinski

在webpack.config.js的loaders列表中添加另一个元素，使用vue-loader来处理.vue文件，而不是Babel。 - Aurora0001

你能否更新帖子并附上你的最新配置？ - Aurora0001

Answer 1

你需要从webpack.config.js文件中删除query对象，并创建一个包含以下内容的.babelrc文件。

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

- Belmin Bedak

---

没有 transform-runtime 也能很好地工作 - 感谢 @Belmin - Sebastian Sulinski

Answer 2

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

.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

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

- Maciej Smoliński

---

嗨@seb，请再试一次。我没有在加载器测试中去除不必要的撇号，现在代码已更新。 - Maciej Smoliński

我尝试了两种方法，但实际上并没有任何区别 - 在终端中，我只收到了上面提到的[BABEL]警告，并且文件已经编译 - 但在浏览器中查看时仍然存在export问题。 - Sebastian Sulinski

这里有一个示例 webpack.config.js 文件，它使用了 vue-loader：https://github.com/BrokingClub/CDN/blob/a0ac36d6419cf0738e6691b119a29f4931259719/webpack.config.js ，以及一个 .vue 组件示例：https://github.com/BrokingClub/CDN/blob/a0ac36d6419cf0738e6691b119a29f4931259719/src/main/resources/assets/js/components/Navbar.vue，这样你就可以比较一下你的设置。 - Maciej Smoliński

如果我们使用webpack捆绑文件，则在编译后的文件中不应该进行任何显式的export调用。它们都应该被转换。您确定在HTML中指向的是输出文件而不是输入文件吗？您可以将webpack配置中的filename更改为其他名称，例如 bundle.js，然后尝试在HTML中加载该文件吗？有任何变化吗？ - Maciej Smoliński

谢谢@Belmin - 这个方法很好用！它在不使用transform-runtime的情况下运行。通过从babel加载器中删除query块并添加.babelrc预设，它可以很好地工作。@Belmin，你能把它作为答案添加吗？这样我就可以接受了。 - Sebastian Sulinski