javascript - 引用错误 : Unknown plugin "react-html-attrs" specified

Question

我一直在尝试运行基于 YouTube 的示例 Module-Loader 程序但即使在关注了 stackoverflow 中与此相关的所有链接之后，我也无法解决这个问题。请在下面找到我的项目的详细信息，

我的项目结构:

**package.json**
{
  "name": "react-tutorials",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.16.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.12.2"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.16.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.12.2"
  },
  "scripts": {
    "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

webconfig.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/scripts.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

异常跟踪:

D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-master\1-basic-rea
ct>webpack
Hash: 826e21c818de1882d366
Version: webpack 1.13.2
Time: 1424ms
    + 1 hidden modules

ERROR in ./js/scripts.js
Module build failed: ReferenceError: Unknown plugin "react-html-attrs" specified
 in "base" at 0, attempted to resolve relative to "D:\\Software\\Ping\\react-js-
tutorials-master\\react-js-tutorials-master\\1-basic-react\\js"
    at D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-master\1-ba
sic-react\node_modules\babel-core\lib\transformation\file\options\option-manager
.js:176:17
    at Array.map (native)
    at Function.normalisePlugins (D:\Software\Ping\react-js-tutorials-master\rea
ct-js-tutorials-master\1-basic-react\node_modules\babel-core\lib\transformation\
file\options\option-manager.js:154:20)
    at OptionManager.mergeOptions (D:\Software\Ping\react-js-tutorials-master\re
act-js-tutorials-master\1-basic-react\node_modules\babel-core\lib\transformation
\file\options\option-manager.js:228:36)
    at OptionManager.init (D:\Software\Ping\react-js-tutorials-master\react-js-t
utorials-master\1-basic-react\node_modules\babel-core\lib\transformation\file\op
tions\option-manager.js:373:12)
    at File.initOptions (D:\Software\Ping\react-js-tutorials-master\react-js-tut
orials-master\1-basic-react\node_modules\babel-core\lib\transformation\file\inde
x.js:221:65)
    at new File (D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-m
aster\1-basic-react\node_modules\babel-core\lib\transformation\file\index.js:141
:24)
    at Pipeline.transform (D:\Software\Ping\react-js-tutorials-master\react-js-t
utorials-master\1-basic-react\node_modules\babel-core\lib\transformation\pipelin
e.js:46:16)
    at transpile (D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-
master\1-basic-react\node_modules\babel-loader\index.js:38:20)
    at Object.module.exports (D:\Software\Ping\react-js-tutorials-master\react-j
s-tutorials-master\1-basic-react\node_modules\babel-loader\index.js:131:12)

Answer 1

尝试 npm install babel-plugin-react-html-attrs --save

当你在做的时候， $npm 安装 babel-plugin-transform-class-properties --save

由于某种原因，错误消息中的名称被缩短了。这些有助于处理作为 JSX 代码粘贴的 html 中的属性和类名。语法需要适应 JSX。

参见 https://github.com/insin/babel-plugin-react-html-attrs/blob/master/README.md

糟糕，现在我在你的 package.json (tldr) 中看到了这些。通过执行 npm 安装，我以某种方式修复了这些错误。