Cú phápError: Mã thông báo không mong muốn 'const' (với Vue, Karma, Webpack, PhantomJS)

Question

Tôi có nhiều ứng dụng vanilla Laravel + Vue.js hơn và tôi đang cố gắng thực hiện một số JS testing with Karma and Jasmine. Nếu tôi cố gắng sử dụng () => {} chức năng hoặc từ khóa kiểu như const trong các thử nghiệm của mình, chúng không thành công với Lỗi không mong muốn lỗi, tuy nhiên, tôi không gặp sự cố khi sử dụng từ khóa import và tôi có thể transpile và làm việc với .vue tệp không có vấn đề .

Một sự khẳng định tầm thường như

expect(true).toBe(true); 

vẻ để làm việc tốt (xem dòng cuối cùng)

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

Sau đó, nếu tôi thêm một const khai tầm thường với chức năng thử nghiệm của tôi

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

Tôi gặp lỗi:

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

Thay vào đó, nếu tôi cố gắng gây ra một lỗi cú pháp

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

sau đó Babel phàn nàn (trên dòng đầu tiên, trước khi Karma hoặc PhantomJS khởi động lên)

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! 

này dường như ngụ ý rằng tệp Example.spec.js đang được phân tích cú pháp/được transpiled bởi Babel, nhưng phiên bản chuyển đổi không được gửi đến trình duyệt đúng cách, mặc dù tệp Example.vue dường như được gửi đúng cách.

Tôi có thể làm gì để có thể nhận những thứ như const và () => {} để làm việc trong các thử nghiệm của mình? Cảm ơn bạn.

Dưới đây là các tập tin liên quan:

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

    }) 
} 

---

Và 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" 
    } 
} 

Answer 1

Các ý kiến ​​của @craig_h và @PanJunjie đặt tôi trên đường đua nhìn vào cấu hình cho karma-babel-preprocessor, dẫn tôi đến cấu hình cho karma-webpack. Tôi vẫn không chắc chắn những gì đã gây ra vấn đề ban đầu, nhưng nó xuất hiện rằng cấu hình webpack của tôi cho Karma là không chính xác hoặc không đầy đủ, và đã không âm thầm.Tôi thêm babel-loader và babel-preset-es2015 gói qua

yarn add babel-loader babel-preset-es2015 

Và sau đó tôi redid và dọn dẹp karma.conf.js của tôi như vậy:

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 của tôi bây giờ trông như thế này:

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

Với tất cả rằng, bây giờ tôi có thể sử dụng tất cả các ưu điểm ES2015 như const và () => {}. Xin lỗi để trả lời câu hỏi của riêng tôi, nhưng tôi hy vọng điều này sẽ giúp người khác gặp phải vấn đề tương tự.

Answer 2

Tôi gặp sự cố tương tự (mặc dù không giống nhau; cấu hình của bạn khá cụ thể). Tôi cũng đã sử dụng Vue, karma, webpack và phantomjs (như được định cấu hình trong mẫu vue-Webpack).

Tuy nhiên, vấn đề của tôi là tôi đã xác định const trong tệp trợ giúp đã được nhập vào ứng dụng của tôi. Khi tôi thay đổi const thành var trong tệp đó, các thử nghiệm đã có thể chạy. (Không quan trọng có hay không const được sử dụng trong các tệp khác đã nằm trong thư mục src).

Sự cố này đã được khắc phục khi tôi chuyển tệp trợ giúp này vào thư mục src hoặc một trong các thư mục con của nó. Tôi là quá nhiều người mới để biết lý do tại sao điều này giải quyết vấn đề, nhưng tôi đoán rằng babel không được cấu hình để làm việc trong thư mục gốc, và chỉ được chỉ vào thư mục src.

Hy vọng điều này cũng hữu ích cho người khác.

Answer 3

Ngoài nhận xét của RyanQuey: anh ấy đúng. Thiết lập mặc định của Vue + Webpack CLI chỉ bao gồm các ngữ cảnh nhất định được trình quản lý bộ nạp babel xử lý. Nhìn vào build/webpack.base.conf.js và sau đó đến quy tắc module cho các tệp JS. Bạn có thể thấy rằng chỉ có các đường dẫn src, test và node_modules/webpack-dev-server/client được đưa vào (tại thời điểm viết bài này).