web-dev-qa-db-ja.com

SyntaxError：予期しないトークン 'const'（Vue、Karma、Webpack、PhantomJSを使用）

私は多かれ少なかれバニラを持っていますLaravel + Vue.jsアプリと私はいくつかをしようとしています カルマとジャスミンを使ったJSテスト 。私のテストでは、() => {}スタイルの関数またはconstのようなキーワードは、予期しないトークンエラーで失敗しますが、私はしません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

代わりに、構文エラーを発生させようとすると

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

次に、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!

これは、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

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

{
  "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"
  }
}
webpackkarma-runnervue.jsbabeljs
6
Clayton

@craig_hと@PanJunjieのコメントにより、私はkarma-babel-preprocessorの構成を確認することになり、karma-webpackの構成にたどり着きました。元の問題の原因はまだわかりませんが、Karmaのwebpack構成が正しくないか不完全であり、サイレントに失敗していたようです。 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"
  }
}

これで、constや() => {}などのES2015の優れた機能をすべて使用できるようになりました。私自身の質問に答えて申し訳ありませんが、これが同様の問題に遭遇した他の誰かに役立つことを願っています。

4
Clayton

RyanQueyのコメントに加えて：彼は正しいです。デフォルトのVue + Webpack CLIセットアップには、babel-loaderによって処理される特定のコンテキストのみが含まれます。build/ webpack.base.conf.jsを調べてから、JSのモジュールルールを調べてください。 -ファイル。src、test、node_modules/webpack-dev-server/clientパスのみが含まれていることがわかります（この記事の執筆時点）。

1
nicoes

私も同様の問題を抱えていました（同一ではありませんが、構成はかなり具体的です）。また、Vue、karma、webpack、およびphantomjs（vue-Webpackテンプレートで構成されている）も使用していました。

ただし、私の問題は、アプリにインポートされるヘルパーファイルでconstを定義していたことです。そのファイルでconstをvarに変更すると、テストを実行できました（すでに使用されている他のファイルでconstが使用されているかどうかは関係ありません。 srcディレクトリ内）。

この問題は、このヘルパーファイルをsrcフォルダーまたはそのサブディレクトリの1つに移動したときに修正されました。これで問題が解決した理由を知るにはあまりにも初心者ですが、babelはルートフォルダーで機能するように構成されておらず、srcフォルダーにのみ向けられていたと思います。

うまくいけば、これは他の人にも役立つでしょう。

1
RyanQuey