Question

清除node_modules文件夹后执行以下错误并执行干净npm build并运行webpack。

有人可以帮我理解我得到的错误吗？我是webpack的新手。

以下代码段是我的webpack.config

var path = require('path');
var webpack = require('webpack');

var config = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './app/main'
  ],
  output: {
    path: path.join(__dirname, 'public', 'js'),
    filename: 'bundle.js',
    publicPath: '/js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          plugins: [
            ['react-transform', {
              transforms: [
                {
                  transform: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module']
                }, {
                  transform: 'react-transform-catch-errors',
                  imports: ['react', 'redbox-react']
                }
              ]
            }]
          ],
          presets: ['react', 'es2015', 'stage-1']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', 'css', 'scss']
  },
};

./app/components/App.js中的错误模块构建失败：TypeError：/Users/ericlin/projects/360/app/components/App.js：VariableDeclarator的属性id预期节点属于[“LVal”]类型，而是获得“CallExpression” at Object.validate（/Users/ericlin/projects/360/node_modules/babel-types/lib/definitions/index.js:109:13） at Object.validate（/Users/ericlin/projects/360/node_modules/babel-types/lib/index.js:541:9）在NodePath._replaceWith（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/replacement.js:208:7）在NodePath.replaceWith（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/replacement.js:186:8）在RewireState.Identifier（/Users/ericlin/projects/360/node_modules/babel-plugin-rewire/lib/babel-plugin-rewire.js:176:10）在NodePath._call（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:76:18）在NodePath.call（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:48:17）在NodePath.visit（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:106:12）在TraversalContext.visitQueue（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:167:16）在TraversalContext.visitSingle（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:118:19）在TraversalContext.visit（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:211:19）在Function.traverse.node（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/index.js:161:17）在NodePath.visit（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:116:19）在TraversalContext.visitQueue（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:167:16）在TraversalContext.visitMultiple（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:113:17）在TraversalContext.visit（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:209:19）在Function.traverse.node（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/index.js:161:17）在NodePath.visit（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:116:19）在TraversalContext.visitQueue（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:167:16）在TraversalContext.visitMultiple（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:113:17）在TraversalContext.visit（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:209:19）在Function.traverse.node（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/index.js:161:17）在遍历（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/index.js:83:12）在NodePath.traverse（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/index.js:147:25）在PluginPass.exit（/Users/ericlin/projects/360/node_modules/babel-plugin-rewire/lib/babel-plugin-rewire.js:199:11）在newFn（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/visitors.js:301:19）在NodePath._call（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:76:18）在NodePath.call（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:48:17）在NodePath.visit（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:118:8）在TraversalContext.visitQueue（/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:167:16） @ ./app/routes.js 31：11-38

Answer 1

在旧项目上执行干净的npm安装后，我今天遇到了类似的情况。似乎应该责怪babel-plugin-rewire。就我而言，我找到了两个解决方案。

首先解决方案是从babel-plugin-rewire@1.0.0-rc-5回滚到1.0.0-rc-4

我选择其他解决方案，这可能不适用于您的情况。在我的.babelrc我在顶层声明了rewire插件，因此我将其移至test环境中。所以我的.babelrc已从

更改了

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "syntax-class-properties",
    "transform-class-properties",
    "syntax-object-rest-spread",
    "transform-object-rest-spread",
    "rewire"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

到此：

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "syntax-class-properties",
    "transform-class-properties",
    "syntax-object-rest-spread",
    "transform-object-rest-spread"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "plugins": [
        "rewire"
      ]
    }
  }
}

Answer 2

FWIW我的问题是一个React组件的怪异声明：

export const Foo = class extends React.Component {...}

将其更改为普通的类声明可解决此问题。我可以想象在您的情况下这是类似的事情。（对我来说，这个问题也是由babel-plugin-rewire引起的，但我还不想从项目中删除它。）

清理node_modules文件夹

2 个答案: