本文介绍了SyntaxError:意外标记“const"(使用 Vue、Karma、Webpack、PhantomJS)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个或多或少的香草 Laravel + Vue.js 应用程序，我正在尝试做一些 使用 Karma 和 Jasmine 进行 JS 测试.如果我尝试使用 () =>{} 样式函数或关键字(如 const)在我的测试中失败并出现 意外令牌 错误，但是，我使用 没有问题import 关键字，我可以毫无问题地转译和使用 .vue 文件.
像一个微不足道的断言
expect(true).toBe(true);
似乎工作正常(见最后一行)
$ ./node_modules/karma/bin/karma start22 11 2016 11:09:23.250:INFO [karma]:Karma v1.3.0 服务器在 http://localhost:9876/启动22 11 2016 11:09:23.254:INFO [启动器]:以无限并发启动浏览器 PhantomJS22 11 2016 11:09:23.263:INFO [启动器]:启动浏览器 PhantomJS22 11 2016 11:09:24.025:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]:连接到套接字/#U1dCZ7i3UtsC-M3_AAAA，ID 为 84458811PhantomJS 2.1.1 (Mac OS X 0.0.0): 执行 1 of 1 SUCCESS (0.004 secs/0.002 secs)
然后，如果我向我的测试函数添加一个简单的const 声明
const myVar = 1期望(真).toBe(真)；
我收到一个错误:
$ ./node_modules/karma/bin/karma start22 11 2016 11:10:00.741:INFO [karma]:Karma v1.3.0 服务器在 http://localhost:9876/启动22 11 2016 11:10:00.745:INFO [启动器]:以无限并发启动浏览器 PhantomJS22 11 2016 11:10:00.752:INFO [启动器]:启动浏览器 PhantomJS22 11 2016 11:10:01.659:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]:连接到套接字/#Gwh8ywcLStrKf-ljAAAA，ID 为 78654911PhantomJS 2.1.1 (Mac OS X 0.0.0) 错误语法错误:意外的标记const"在测试/单元/Example.spec.js:165
相反，如果我试图引起语法错误
const = 1//语法错误期望(真).toBe(真)；
然后 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: 意外令牌 (8:15)在/Users/crcarter/Software/CropPlanning/cps-php/resources/assets/js/tests/unit/Example.spec.js22 11 2016 11:07:00.090:INFO [karma]:Karma v1.3.0 服务器在 http://localhost:9876/启动22 11 2016 11:07:00.091:INFO [launcher]:以无限并发启动浏览器 PhantomJS22 11 2016 11:07:00.101:INFO [启动器]:启动浏览器 PhantomJS22 11 2016 11:07:00.986:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]:连接到套接字/#9Y6QLVxtJ57qRrgDAAAA，ID 为 56249014PhantomJS 2.1.1 (Mac OS X 0.0.0) 错误您需要包含一些实现 __karma__.start 方法的适配器！
这似乎意味着 Example.spec.js 文件正在被 Babel 解析/转译，但转译后的版本没有正确传送到浏览器，即使 Example.vue 文件似乎已正确传递.
我该怎么做才能获得 const 和 () => 之类的东西?{} 在我的测试中工作?谢谢.
以下是相关文件:
resources/assets/js/components/Example.vue资源/资产/js/tests/unit/Example.spec.js业力配置文件包.json
//Example.vue<模板><div class="容器">
<脚本>导出默认{安装(){console.log('组件准备好.')},数据() {返回{输入:'#你好！'}}}
//Example.spec.js从'../../components/Example.vue'导入示例；描述('例子'，函数(){it('应该设置正确的默认数据', function () {常量 myVar = 1//琐碎的断言期望(真).toBe(真)；});});
//karma.conf.jsvar path = require('path')var basePath = './resources/assets/js/';module.exports = 函数(配置){配置集({框架:['茉莉花']，端口:9876，日志级别:config.LOG_INFO，自动观察:真的，浏览器:['PhantomJS']，单运行:真，基路径:基路径，网络包:{解决: {扩展名:['', '.js', '.vue'],回退:[path.join(__dirname, 'node_modules')],},解析加载器:{回退:[path.join(__dirname, 'node_modules')]},模块: {装载机: [{ 测试:/.vue$/, 加载器: 'vue' },{ 测试:/.js$/，加载器:'babel'，包括:基本路径，}]}},webpack 中间件:{无信息:真实，统计数据:'仅错误'},文件:[{ 模式:'tests/**/*.spec.js'，观察:假}，],排除: []，预处理器:{'app.js': ['webpack', 'babel'],'tests/**/*.spec.js': [ 'babel', 'webpack' ]},})}
和 package.json
{私人":真的，脚本":{"prod": "gulp --production","dev": "gulp watch"},开发依赖":{"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"},依赖关系":{"jasmine-core": "^2.5.2","业力": "^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"}} 解决方案
@craig_h 和 @PanJunjie 的评论让我开始研究 karma-babel-preprocessor 的配置，其中引导我查看 karma-webpack 的配置.我仍然不确定是什么导致了最初的问题，但似乎我的 Karma 的 webpack 配置不正确或不完整，并且默默地失败了.我通过
添加了
babel-loader 和
babel-preset-es2015 包
yarn 添加 babel-loader babel-preset-es2015
然后我重新编写并清理了我的karma.conf.js:
module.exports = function(config) {配置集({singleRun: false,//false =>注意更改并重新运行测试autoWatch: true,//启用/禁用观看文件 &然后运行测试框架:['茉莉花']，浏览器:['PhantomJS']，//选项:LOG_DISABLE、LOG_ERROR、LOG_WARN、LOG_INFO、LOG_DEBUG日志级别:config.LOG_INFO，basePath: './resources/assets/js/',文件:[{ 模式:'tests/**/*.spec.js'，观察:假}，],//如何在将文件提供给浏览器进行测试之前对其进行处理预处理器:{'app.js': ['webpack'],'tests/**/*.spec.js': ['webpack'],},网络包:{模块: {装载机: [{ 测试:/.vue$/, 加载器: 'vue' },{ 测试:/.js$/,loader: 'babel-loader',排除:/node_modules/，查询:{预设:['es2015']}}]},//确保使用独立版本的 Vue解决: {别名:{vue:'vue/dist/vue.js'}}},webpack 中间件:{无信息:真实，统计数据:'仅错误'}});};
我的 package.json 现在看起来像这样:
{私人":真的，脚本":{"prod": "gulp --production","dev": "gulp watch"},开发依赖":{"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"},依赖关系":{"babel-loader": "^6.2.8","babel-preset-es2015": "^6.18.0","jasmine-core": "^2.5.2","业力": "^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 和 () =>;{}.很抱歉回答我自己的问题，但我希望这能帮助遇到类似问题的其他人.
I have a more-or-less vanilla Laravel + Vue.js app and I am trying to do some JS testing with Karma and Jasmine. If I try to use () => {} style functions or keywords like const in my tests, they fail with Unexpected token errors, however, I do not have a problem using the import keyword and I am able to transpile and work with .vue files without issue.
A trivial assertion like
expect(true).toBe(true);
Seems to work fine (see last line)
$ ./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)
Then, if I add a trivial const declaration to my test function
const myVar = 1
expect(true).toBe(true);
I get an error:
$ ./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
Instead, if I try to cause a syntax error
const = 1 // syntax error
expect(true).toBe(true);
then Babel complains (on the first line, before Karma or PhantomJS boots up)
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!
This seems to imply that the Example.spec.js file is being parsed/transpiled by Babel, but that the transpiled version is not being delivered to the browser properly, even though the Example.vue file seems to be delivered properly.
What can I do to be able to get things like const and () => {} to work in my tests? Thank you.
Here are the relevant files:
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' ]
},
})
}
And 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"
}
}
解决方案
The comments by @craig_h and @PanJunjie set me on the track of looking at the configuration for karma-babel-preprocessor, which led me to the config for karma-webpack. I'm still not sure what was causing the original problem, but it appears that my webpack config for Karma was incorrect or incomplete, and was failing silently. I added babel-loader and babel-preset-es2015 packages via
yarn add babel-loader babel-preset-es2015
And then I redid and cleaned up my karma.conf.js as such:
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'
}
});
};
My package.json now looks like this:
{
"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"
}
}
With all of that, I can now use all of the ES2015 goodness like const and () => {}. Sorry to answer my own question, but I hope this helps someone else that encounters a similar issue.
这篇关于SyntaxError:意外标记“const"(使用 Vue、Karma、Webpack、PhantomJS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
