SyntaxError:意外的标记'const'(使用Vue,Karma,Webpack,PhantomJS)

Question

SyntaxError:意外的标记'const'(使用Vue,Karma,Webpack,PhantomJS)

Cla*_*ton 6 karma-runner webpack vue.js babeljs

我有一个或多或少的香草Laravel + Vue.js应用程序,我正在尝试与Karma和Jasmine进行一些JS测试.如果我尝试在我的测试中使用() => {}样式函数或关键字const,它们会因意外的令牌错误而失败,但是,使用该import关键字时我没有问题,而且我能够无故障地转换和处理.vue文件.

像一个微不足道的断言

expect(true).toBe(true);

Run Code Online (Sandbox Code Playgroud)

似乎工作正常(见最后一行)

$ ./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)

Run Code Online (Sandbox Code Playgroud)

然后,如果我const向我的测试函数添加一个简单的声明

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

Run Code Online (Sandbox Code Playgroud)

我收到一个错误:

$ ./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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

然后Babel抱怨(在第一行,在Karma或PhantomJS启动之前)

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!

Run Code Online (Sandbox Code Playgroud)

这似乎意味着该Example.spec.js文件正在被Babel解析/转换,但是转换后的版本没有正确地传递给浏览器,即使该Example.vue文件似乎正确传递.

我能做些什么才能够得到像const和() => {}在我的测试工作吗？ 谢谢.

以下是相关文件:

resources/assets/js/components/Example.vue
resources/assets/js/tests/unit/Example.spec.js
karma.conf.js                             
package.json

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

// 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);
    });
});

Run Code Online (Sandbox Code Playgroud)

// 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' ]
        },

    })
}

Run Code Online (Sandbox Code Playgroud)

和 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": {
    "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"
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Cla*_*ton 4

@craig_h 和 @PanJunjie 的评论让我走上了查看的配置的轨道karma-babel-preprocessor，这让我找到了的配置karma-webpack。我仍然不确定是什么导致了最初的问题，但似乎我的 Karma webpack 配置不正确或不完整，并且默默地失败了。我添加babel-loader并babel-preset-es2015打包通过

yarn add babel-loader babel-preset-es2015

Run Code Online (Sandbox Code Playgroud)

然后我重新整理并清理了我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'
        }
    });
};

Run Code Online (Sandbox Code Playgroud)

我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"
  }
}

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	8 年，10 月前
查看次数：	11332 次
最近记录：	7 年，8 月前