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

Posted 2023-02-22

【中文标题】Gulp、Vue、Webpack、Babel 和 Uncaught SyntaxError：意外的令牌导入

【英文标题】：Gulp, Vue, Webpack, Babel and Uncaught SyntaxError: Unexpected token import

【发布时间】：2017-03-17 10:51:36

【问题描述】：

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

我正在尝试设置使用 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']);

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

经过数小时试图找出可能导致它的原因后，我已经没有什么想法了，并且正处于放弃的边缘，因此非常感谢任何帮助。

【问题讨论】：

你使用 Babel 和 Webpack 的哪个版本？

它的 webpack-stream@3.2.0 和 babel-loader@6.2.7

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

通过在webpack.config.js 中的loaders 列表中添加另一个元素，将vue-loader 用于.vue 文件而不是Babel。

你能用你的最新配置更新帖子吗？

【参考方案1】：

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

.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 - 恐怕这并没有解决它。加载程序应该是vue 还是vue-loader？

嗨@seb，请再试一次。我没有在加载器测试中去掉不必要的撇号，代码现在更新了。

是的 - 我和你的例子完全一样，但恐怕没有运气。

这是一个使用 vue-loader 的示例 webpack.config.js 文件：github.com/BrokingClub/CDN/blob/… 和一个示例 .vue 组件：github.com/BrokingClub/CDN/blob/…，以便您可以比较您的设置

感谢@Belmin - 这成功了！它在没有transform-runtime 的情况下工作。通过从 babel 加载程序中删除 query 块并添加带有预设的 .babelrc 很有效。 @Belmin 您可以将其添加为答案以便我接受吗？

【参考方案2】：

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

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

【讨论】：

没有transform-runtime 也可以正常工作 - 谢谢@Belmin