如何獲得browserify，巴貝爾和覆蓋因果報應合作

我越來越厭倦試圖讓節點庫才能正常共同努力......但它是工作的一部分，所以這裏去...如何獲得browserify，巴貝爾和覆蓋因果報應合作

我有一個適用於瀏覽器的ES6應用程序。我對我的文件進行了一系列單元測試，這些文件是從ES5中編寫應用程序時提出的。我使用browserify來處理導入/導出模塊並捆綁我的發行版。在瀏覽器中運行應用程序時，這工作正常。我可以成功瀏覽源代碼和spec文件並運行測試，並通過測試。我非常非常接近這個工作。

唯一的問題是覆蓋率。我來表示這種卡瑪 - browserify報道最近生成的文件，其中每個看起來像這樣：

require('/absolute/path/to/the/corresponding/file.js');

和覆蓋面明顯顯示爲100％所有的文件，因爲每個人只有一行。

這是我karma.conf.js：

import babelify from 'babelify'; 
import isparta from 'isparta'; 
import paths from './paths'; 


var normalizeBrowserName = (browser) => browser.toLowerCase().split(/[ /-]/)[0]; 

export default function(config) { 
    config.set({ 
     basePath: '..', 
     browsers: ['PhantomJS'], 
     frameworks: ['browserify', 'jasmine'], 
     files: paths.test.files, 
     preprocessors: { 
      'app/**/*.js': ['browserify', 'sourcemap', 'coverage'], 
      [paths.test.testFiles]: ['babel'], 
     }, 
     plugins: [ 
      'karma-babel-preprocessor', 
      'karma-browserify', 
      'karma-coverage', 
      'karma-jasmine', 
      'karma-junit-reporter', 
      'karma-phantomjs-launcher', 
      'karma-sourcemap-loader', 
     ], 
     autoWatch: false, 
     colors: false, 
     loggers: [{ type: 'console' }], 
     port: 9876, 
     reporters: ['progress', 'dots', 'junit', 'coverage'], 
     junitReporter: { 
      outputFile: paths.test.resultsOut, 
      suite: '', 
     }, 
     browserify: { 
      debug: true, 
      noParse: paths.js.noparse(), 
      configure: (bundle) => { 
       bundle.once('prebundle',() => bundle.transform(babelify.configure({ ignore: 'lib/!**!/!*' }))); 
      }, 
     }, 
     coverageReporter: { 
      instrumenters: { isparta }, 
      instrumenter: { 
       [paths.test.cover]: 'isparta', 
      }, 
      reporters: [ 
       { type: 'text', }, 
       { type: 'html', dir: paths.test.coverageOut, subdir: normalizeBrowserName }, 
       { type: 'cobertura', dir: paths.test.coverageOut, subdir: '.', file: 'coverage.xml' }, 
      ], 
     }, 
     logLevel: config.LOG_DEBUG, 
    }); 
};

我真的不知道如何這些庫的工作，所以我不知道在哪裏調試這個啓動。我知道預處理器的順序很重要，因此browserify在源文件上運行，將生成的鏈接文件提供給源映射生成器，然後源映射生成器將所得到的結果輸入到業務覆蓋中。但是，瀏覽器和處理覆蓋範圍的任何內容之間都存在一些溝通上的損失。 isparta（在幕後使用伊斯坦布爾）不知道browserify正在運行，我不知道它看到了什麼。

我在這裏散漫，因爲我真的不知道這些東西是如何工作的。

如果任何人有任何測試模塊化ES6的經驗，如果我在正確的軌道上，或者我應該嘗試其他方法，請告訴我。

來源

2016-01-21 jchitel

這是爲我工作的配置，請注意我使用的是browserify-istanbul而不是isparata。

var istanbul = require('browserify-istanbul'); 

module.exports = function(config) { 
    config.set({ 
     basePath: '', 
     frameworks: ['browserify', 'mocha'], 
     files: [ 
      'test/**/*Spec.js' 
     ], 
     exclude: [ 
      '**/*.sw?' 
     ], 
     preprocessors: { 
      'test/**/*Spec.js': ['browserify', 'coverage'] 
     }, 
     browserify: { 
      debug: true, 
      transform: [ 
      ['babelify', { 
       ignore: /node_modules/ 
      }], 
      istanbul({ 
       ignore: ['test/**', '**/node_modules/**'] 
      }) 
      ], 
      extensions: ['.jsx'] 
     }, 

     babelPreprocessor: { 
      options: { 
      sourceMap: 'inline' 
      }, 
      sourceFileName: function(file) { 
      return file.originalPath; 
      } 
     }, 
     coverageReporter: { 
      dir: 'coverage/', 
      reporters: [ 
      { type: 'text-summary' } 
      ] 
     }, 
     browserNoActivityTimeout: 180000, 
     reporters: ['coverage', 'progress'], 
     port: 9876, 
     colors: true, 
     logLevel: config.LOG_INFO, 
     autoWatch: true, 
     browsers: ['Chrome'], 
     singleRun: false 
    }); 
};

這是一個非常痛苦的工作。

希望幫助

來源

2016-01-22 14:30:28

我得到的HTML輸出壓縮排除/導入，所以每次它說所有文件都有測試時，它不是真的。 HTML報告中的所有文件都包含'typeof require ===「function」&& require（MY-FILE）' – Cyberdelphos

HOW TO：噶+通天+陣營+ Browserify +伊斯坦布爾

我想我得到了它。

如果我不這樣做，我ping通[email protected]

不知道以前的答案不工作與使用茉莉，而不是摩卡做，但我得到了它與這些設置工作。

必需的軟件包：除了顯而易見的（反應，因果報應，茉莉花，Browserify）

isparta    - an Istanbul instrumenter for ES6 
browserify-istanbul - a browserify transform 
babelify   - another browserify transform 
babel    - JS compiler 
babel-preset-2015 - ES6 compile preset 
babel-preset-react - React compile preset

創建你的根目錄一個.babelrc文件。我很困惑，在何處放置工具中巴貝爾的選擇，但大多數（這些）巴貝爾工具將神色一.babelrc

{ 
    "presets": ["es2015", "react"], 
    "sourceMap": "inline" 
}

karma.config.js：

const isparta = require('isparta'); 
const istanbul = require('browserify-istanbul'); 

module.exports = function (config) { 
    config.set({ 

    basePath: '', 

    browsers: ['Firefox', 'Chrome', 'PhantomJS', 'Safari'], 

    captureConsole: true, 

    clearContext: true, 

    colors: true, 

    files: [ 

     // you need this for Phantom 
     'node_modules/phantomjs-polyfill/bind-polyfill.js', 

     // import any third party libs, we bundle them in another gulp task 
     './build/libs/vendor-bundle.js', 

     // glob for spec files 
     '__PATH_TO_SPEC_FILES_/*.spec.js' 
    ], 

    frameworks: ['jasmine', 'browserify'], 

    logLevel: config.LOG_INFO, 

    preprocessors: { 

     // I had to NOT include coverage, the browserify transform will handle it 
     '__PATH_TO_SPEC_FILES_/*.spec.js': 'browserify' 
    }, 

    port: 9876, 

    reporters: ['progress', 'coverage'], 

    browserify: { 

     // we still use jQuery for some things :(
     // I don't think most people will need this configure section 
     configure: function (bundle) { 
     bundle.on('prebundle', function() { 
      bundle.external(['jquery']); 
     }); 
     }, 

     transform: [ 

     // this will transform your ES6 and/or JSX 
     ['babelify'], 

     // (I think) returns files readable by the reporters 
     istanbul({ 
      instrumenter: isparta, // <--module capable of reading babelified code 
      ignore: ['**/node_modules/**', '**/client-libs/**'] 
     }) 
     ], 

     // our spec files use jsx and so .js will need to be compiled too 
     extensions: ['.js', '.jsx'], 

     // paths that we can `require()` from 
     paths: [ 
     './node_modules', 
     './client-libs', 
     './universal' 
     ], 

     debug: true 
    }, 

    coverageReporter: { 
     reporters: [ 
     { type: 'html', dir: 'coverage/Client' }, 
     { type: 'text-summary' } 
     ] 
    } 
    }); 
};

來源

2016-08-04 23:42:07

如果不設置coverage預處理器並且轉換失敗，我無法使其工作，答案和Derek的一個。 – Cyberdelphos

隨着噶，我認爲它會是這個樣子（？）：

// Karma configuration 
'use strict'; 

    let babelify = require('babelify'); 
    let browserify = require('browserify'); 
    let browserifyBabalIstanbul = require('browserify-babel-istanbul'); 
    let isparta = require('isparta'); 

    browserify: { 
       debug: true, 
       transform: [ 
        browserifyBabalIstanbul({ 
         instrumenter: isparta, 
         instrumenterConfig: { babel: { presets: ["es2015"] } }, 
         ignore: ['**/node_modules/**', '**/unitest/**'] 
        }), 
        [ babelify, { presets: ["es2015"] } ] 
       ] 
      },

看到下面的鏈接：Find a good way to get a coverage report with karma?

來源

2016-08-16 11:44:35

如何獲得browserify，巴貝爾和覆蓋因果報應合作

回答

相關問題