【问题标题】:Using Webpack with Karma causes node modules loading error将 Webpack 与 Karma 一起使用会导致节点模块加载错误
【发布时间】:2017-07-28 06:32:49
【问题描述】:

我正在尝试使用 Karma 运行我的 Jasmine 测试,但我相信某些应该加载的模块没有加载,这可能是依赖问题,但我的想法已经不多了。

karma.conf.js

var webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};

module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],
    // list of files / patterns to load in the browser
    files: [
        { pattern: 'test-context.js'}
    ],
    // list of files to exclude
    exclude: [
    ],
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'test-context.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,
    debug: true
  })
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    './index.js'
  ],
  output: {
      publicPath: '/',
      filename: 'main.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader'
      }
    ],
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  },
  node: {
    net: 'empty',
    tls: 'empty',
    //dns: 'empty',
    fs: 'empty'
  },
  externals: {
    //'crypto': 'crypto'
  },
  debug: true
};

package.json

{
  "name": "Web-Application",
  "version": "0.0.1",
  "description": "A web application",
  "engines": {
    "node": "5.9.1"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "tests": "karma start"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-register": "^6.23.0",
    "box-node-sdk": "^1.3.0",
    "ejs": "2.4.1",
    "express": "4.13.3",
    "node-libs-browser": "^2.0.0",
    "crypto-browserify": "^3.11.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/heroku/node-js-getting-started"
  },
  "keywords": [
    "node",
    "heroku",
    "express"
  ],
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^v6.4.0",
    "babel-preset-env": "^1.2.0",
    "babel-preset-es2015": "^6.22.0",
    "express": "4.13.3",
    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
    "karma": "^1.5.0",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs2-launcher": "^0.5.0",
    "karma-webpack": "^2.0.2",
    "webpack": "^1.3.0",
    "webpack-dev-server": "1.10.1"
  }
}

我加了

node: {
    net: 'empty',
    tls: 'empty',
    //dns: 'empty',
    fs: 'empty'
  }, 

在代码中删除以前的依赖问题,但这可能只是修复了服务层,可能存在更深层次的依赖问题。

堆栈跟踪:

Git 源代码

https://github.com/noobiehacker/revaBoxWeb

感谢任何帮助或提示>

【问题讨论】:

    标签: angularjs node.js webpack karma-runner karma-jasmine


    【解决方案1】:

    此示例是一个使用 express 的 Node.js 应用程序,它需要 Node.js 内置模块,例如 fsnet。但是您尝试使用 webpack 构建一个 Web 应用程序(默认目标是 web)并且在浏览器中这些模块不可用。 Webpack 告诉您无法解析这些模块,但您决定将它们清空,从而导致运行时错误。

    要将express 与webpack 一起使用,您需要将target 配置为node,这样webpack 就不会触及内置模块。

    target: 'node'
    

    您还需要删除之前添加的node 配置。

    我正在尝试使用 Karma 运行我的 Jasmine 测试

    如上所述,您正在构建一个 Node.js 应用程序,但 Karma 是一个浏览器测试工具。它将无法运行您的代码。您的代码旨在由节点运行并由节点而不是浏览器测试。

    【讨论】:

    • 嘿迈克尔,感谢您的反馈,我已经尝试过您的解决方案,但我现在收到此错误:“未捕获的 ReferenceError:未定义”,也许我应该找到加载库的方法进入浏览器还是根本不使用业力??
    • 你不能将它们加载到浏览器中,webpack 会保留调用 require('fs') 和其他内置模块,因此它们可以被 Node 直接使用,require 在浏览器中不存在,即使这样做,您也无法访问浏览器中的文件系统。你不能使用 Karma 来测试一个 express 应用,在这种情况下你不需要它,Jasmine 就足够了,它不依赖于浏览器。
    • 那么您是否建议不要使用chrome而使用phantonjs作为浏览器选项?
    • 不,我告诉你,你不是在构建浏览器应用程序。您永远不会在浏览器中运行它,也不需要任何与浏览器相关的工具。 Webpack 还可以捆绑后端应用程序,您只需从节点运行捆绑包:node bundle.js
    • 哦,我正在尝试构建一个角度应用程序,也许这就是问题所在,我不应该使用 express
    猜你喜欢
    • 2021-04-26
    • 2011-06-30
    • 2018-01-27
    • 2020-02-08
    • 2013-11-11
    • 2014-12-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多