使用Istanbul插件构建代码时出错

时间：2019-06-19 11:31:42

标签： javascript reactjs babel istanbul

我正在尝试使用babel-istanbul-plugin为我的ReactJS项目生成代码覆盖率报告。当我在.babelrc文件中添加“ istanbul”作为插件并创建ty时，出现此错误：

ERROR in ./src/entryPoints/App.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /Users/kuli/Sites/persona/src/entryPoints/App.jsx: You gave us a visitor for the node type "ClassPrivateProperty" but it's not a valid type
    at verify (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/visitors.js:196:13)
    at Object.explode (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/visitors.js:72:3)
    at traverse (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/index.js:77:12)
    at NodePath.traverse (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/path/index.js:144:25)
    at Object.enter (/Users/kuli/Sites/persona/node_modules/istanbul-lib-instrument/dist/visitor.js:611:12)
    at PluginPass.enter (/Users/kuli/Sites/persona/node_modules/babel-plugin-istanbul/lib/index.js:90:23)
    at newFn (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/index.js:114:17)
    at traverse (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/index.js:79:12)
    at File.transform (/Users/kuli/Sites/persona/node_modules/babel-core/lib/transformation/file/index.js:548:35)
    at /Users/kuli/Sites/persona/node_modules/babel-core/lib/transformation/pipeline.js:50:19
    at File.wrap (/Users/kuli/Sites/persona/node_modules/babel-core/lib/transformation/file/index.js:564:16)
    at Pipeline.transform (/Users/kuli/Sites/persona/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
    at transpile (/Users/kuli/Sites/persona/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/Users/kuli/Sites/persona/node_modules/babel-loader/lib/index.js:173:20)
 @ multi babel-polyfill ./src/entryPoints/App.jsx App[1]

我正在添加我认为相关的所有信息。请让我知道是否需要更多。

我的.babelrc文件：

{
  "presets": ["env", "stage-0", "react"],
  "plugins": [
    "istanbul",
    "react-hot-loader/babel",
    "transform-decorators-legacy"
  ]
}

App.jsx文件：

import React from 'react';
import ReactDOM from 'react-dom';

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Route } from 'react-router-dom';

import rootReducer from './profile/reducers/index.js';
import ErrorBoundary from './profile/components/ErrorBoundary';
import App from './profile/components/App.js';

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);




ReactDOM.render(
  <Provider store={store}>
    <ErrorBoundary>
      <BrowserRouter>
        <div>
          <Route path="/" component={App}/>
        </div>
      </BrowserRouter>
    </ErrorBoundary>
  </Provider>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}

Dev依赖项：

"devDependencies": {
    "ajv": "6.2.1",
    "babel-core": "6.26.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "7.1.4",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "classnames": "^2.2.5",
    "css-loader": "0.23.1",
    "dotenv": "^7.0.0",
    "eslint": "^3.19.0",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-react": "^5.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "3.2.0",
    "json-loader": "^0.5.4",
    "node-sass": "^4.9.2",
    "postcss-loader": "^0.9.1",
    "prettier-eslint": "^8.8.2",
    "react-hot-loader": "^4.3.3",
    "redux-devtools": "^3.2.0",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.0.11",
    "rimraf": "^2.5.2",
    "sass-loader": "^7.0.3",
    "stats-webpack-plugin": "^0.3.1",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "^4.16.2",
    "webpack-cleanup-plugin": "0.5.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

webpack.config.js 

const webpack = require('webpack');
const path = require('path');
const loaders = require('./webpack.loaders');
const commonConfig = require('./webpack.common');
var HtmlWebpackPlugin = require('html-webpack-plugin');


// const envKeys = commonConfig.getEnvKeys();

module.exports = {
  entry: {
    workflow: ['babel-polyfill', './src/index'],
  },
  output: commonConfig.output,

  // https://webpack.js.org/configuration/devtool/#devtool
  devtool: 'cheap-module-source-map',

  resolve: {
    extensions: commonConfig.extensions,
    alias: commonConfig.alias,
  },
  module: {
      rules: [{
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loaders: ['babel-loader'],
      },

      {
          test: /\.(s?)css$/,
          loader: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: "file"
      },
      {
          test: /\.(woff|woff2)$/,
          loader: "url?prefix=font/&limit=5000"
      },
      {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url?limit=10000&mimetype=application/octet-stream"
      },
      {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url?limit=10000&mimetype=image/svg+xml"
      },
      {
          test: /\.gif/,
          loader: "url-loader?limit=10000&mimetype=image/gif"
      },
      {
          test: /\.jpg/,
          loader: "url-loader?limit=10000&mimetype=image/jpg"
      },
      {
          test: /\.png/,
          loader: "url-loader?limit=10000&mimetype=image/png"
      }
  ]

  },
  plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin('development'),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {

    contentBase: path.join(__dirname, 'build'),
    compress: true,
    port: 9003

  },
};

感谢您的帮助。

1 个答案:

答案 0 :(得分：0)

babel本身似乎是一个问题=> https://github.com/babel/babel/issues/10065

今天删除我的包锁和npm缓存时遇到了同样的问题。

结果是istanbul-lib-instrument软件包更新到3.1.0到3.3.0，导致导入了错误的babel类型。

仅修复了istanbul-lib-instrument的版本，一切都很好。

在您的情况下也可能是babel-eslint。

相关问题
最新问题