SyntaxError：意外的标记'const'（使用Vue，Karma，Webpack，PhantomJS）

时间：2016-11-22 16:37:09

标签： webpack karma-runner vue.js babeljs

我有一个或多或少的香草Laravel + Vue.js应用程序，我正在尝试做一些JS testing with Karma and Jasmine。如果我在我的测试中尝试使用() => {}样式函数或const这样的关键字，则会因意外令牌错误而失败，但是，使用{{{我>没有问题1}}关键字，我能够毫无问题地转换和使用import文件。

像

这样的微不足道的断言 
.vue

似乎工作正常（见最后一行）

expect(true).toBe(true);

然后，如果我向我的测试函数添加一个简单的$ ./node_modules/karma/bin/karma start 22 11 2016 11:09:23.250:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 22 11 2016 11:09:23.254:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 22 11 2016 11:09:23.263:INFO [launcher]: Starting browser PhantomJS 22 11 2016 11:09:24.025:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#U1dCZ7i3UtsC-M3_AAAA with id 84458811 PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.004 secs / 0.002 secs) 声明

const

我收到错误：

const myVar = 1
expect(true).toBe(true);

相反，如果我尝试导致语法错误

$ ./node_modules/karma/bin/karma start
22 11 2016 11:10:00.741:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
22 11 2016 11:10:00.745:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
22 11 2016 11:10:00.752:INFO [launcher]: Starting browser PhantomJS
22 11 2016 11:10:01.659:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#Gwh8ywcLStrKf-ljAAAA with id 78654911
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Unexpected token 'const'
  at tests/unit/Example.spec.js:165

然后Babel抱怨（在第一行，在Karma或PhantomJS启动之前）

const  = 1   // syntax error
expect(true).toBe(true);

这似乎意味着Babel正在解析/转换22 11 2016 11:07:00.079:ERROR [preprocessor.babel]: /Users/crcarter/Software/CropPlanning/cps-php/resources/assets/js/tests/unit/Example.spec.js: Unexpected token (8:15) at /Users/crcarter/Software/CropPlanning/cps-php/resources/assets/js/tests/unit/Example.spec.js 22 11 2016 11:07:00.090:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 22 11 2016 11:07:00.091:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 22 11 2016 11:07:00.101:INFO [launcher]: Starting browser PhantomJS 22 11 2016 11:07:00.986:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#9Y6QLVxtJ57qRrgDAAAA with id 56249014 PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR You need to include some adapter that implements __karma__.start method! 文件，但是转换后的版本没有正确地传递给浏览器，即使Example.spec.js文件似乎已被传递正常。

如果能够在我的测试中使用Example.vue和const这样的内容，我该怎么做？谢谢。

以下是相关文件：

() => {}
resources/assets/js/components/Example.vue
resources/assets/js/tests/unit/Example.spec.js
karma.conf.js                             
package.json

// Example.vue
<template>
    <div class="container">
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component ready.')
        },
        data() {
            return { input: '# Hello!' }
        }
    }
</script>

// Example.spec.js
import Example from '../../components/Example.vue';

describe('Example', function () {
    it('should set correct default data', function () {

        const myVar = 1

        // trivial assertions
        expect(true).toBe(true);
    });
});

// karma.conf.js var path = require('path') var basePath = './resources/assets/js/'; module.exports = function(config) { config.set({ frameworks: ['jasmine'], port: 9876, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['PhantomJS'], singleRun: true, basePath: basePath, webpack: { resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, 'node_modules')], }, resolveLoader: { fallback: [path.join(__dirname, 'node_modules')] }, module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', include: basePath, } ] } }, webpackMiddleware: { noInfo: true, stats: 'errors-only' }, files: [ { pattern: 'tests/**/*.spec.js', watched: false }, ], exclude: [], preprocessors: { 'app.js': ['webpack', 'babel'], 'tests/**/*.spec.js': [ 'babel', 'webpack' ] }, }) } 

package.json

3 个答案:

答案 0 :(得分：4)

@craig_h和@PanJunjie的评论让我看到karma-babel-preprocessor的配置，这导致我进入karma-webpack的配置。我还不确定导致原始问题的原因，但看起来我的Karma配置文件不正确或不完整，并且无声地失败。我通过

添加了babel-loader和babel-preset-es2015个软件包 
yarn add babel-loader babel-preset-es2015

然后我重新整理并清理了我的karma.conf.js：

module.exports = function(config) {

    config.set({

        singleRun: false, // false => watch for changes and rerun tests
        autoWatch: true, // enable / disable watching files & then run tests

        frameworks: ['jasmine'],
        browsers: ['PhantomJS'],

        // Options: LOG_DISABLE, LOG_ERROR, LOG_WARN, LOG_INFO, LOG_DEBUG
        logLevel: config.LOG_INFO,

        basePath: './resources/assets/js/',

        files: [
            { pattern: 'tests/**/*.spec.js', watched: false },
        ],

        // how to process files before serving them to the browser for testing
        preprocessors: {
            'app.js': ['webpack'],
            'tests/**/*.spec.js': ['webpack'],
        },

        webpack: {
            module: {
                loaders: [
                    { test: /\.vue$/, loader: 'vue' },
                    { test: /\.js$/,
                      loader: 'babel-loader',
                      exclude: /node_modules/,
                      query: { presets: ['es2015'] }
                    }
                ]
            },
            // make sure to use the stand-alone version of Vue
            resolve: {
                alias: {vue: 'vue/dist/vue.js'}
            }
        },

        webpackMiddleware: {
          noInfo: true,
          stats: 'errors-only'
        }
    });
};

我的package.json现在看起来像这样：

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-webpack": "^1.8.0"
  }
}

通过所有这些，我现在可以使用所有ES2015善良，例如const和() => {}。很抱歉回答我自己的问题，但我希望这可以帮助遇到类似问题的其他人。

答案 1 :(得分：1)

我有类似的问题（虽然不完全相同;你的配置非常具体）。我还使用了Vue，karma，webpack和phantomjs（在vue-Webpack模板中配置）。

但是，我的问题是我在帮助文件中定义了const，该文件已导入我的应用程序。当我在该文件中将const更改为var时，测试就能够运行了。（const是否已在其他已存在的文件中使用并不重要src目录）。

当我将此帮助文件移动到我的src文件夹或其子目录中时，此问题已得到解决。我不知道为什么这样可以解决问题，但是我猜测babel没有配置为在根文件夹中工作，而只是指向{{1} }文件夹。

希望这对其他人也有帮助。

答案 2 :(得分：1)

除了RyanQuey的评论：他是对的。默认的Vue + Webpack CLI设置仅包括babel-loader要处理的某些上下文。查看build / webpack.base.conf.js，然后查看JS文件的模块规则。您可以看到只包含src，test和node_modules / webpack-dev-server / client路径（在撰写本文时）。

相关问题
最新问题