javascript - ReferenceError: 指定了未知的插件 "react-html-attrs"

我已经尝试了各种方法来运行基于 YouTube 的示例模块加载器程序，但即使参考了 Stack Overflow 上的所有相关链接，仍然无法解决问题。请查看下面我的项目详细信息，

我的项目结构：

**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)

答案＃1

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

顺便说一下，$npm install babel-plugin-transform-class-properties --save

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

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

哎呀，现在我在你的 package.json 中看到了这些（简而言之）。不知怎么的，通过执行 npm 安装，这些错误对我来说就解决了。

答案＃2

我从 learnCodeAcademy 克隆了相同的仓库，并在尝试运行 webpack 时遇到了问题。我按照以下步骤逐一操作，直到 webpack 命令能够顺利运行为止。
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-plugin-react-html-attrs --save-dev
npm install babel-plugin-transform-decorators-legacy --save-dev
npm install babel-plugin-transform-class-properties --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
npm install react-dom --save-dev
npm install react --save-dev

当我运行 webpack 命令时，我得到了以下结果：

哈希: c323a36a23de43f8c0cf
版本: webpack 1.15.0
时间: 2186毫秒资源大小块块名称
client.min.js 1.76 MB 0 [已生成] main
+ 163 个隐藏模块

然后你可以使用 npm run dev
来运行它，因为在 package.json 中脚本映射如下：

"dev": "webpack-dev-server --content-base src --inline --hot"

我还修改了 webpack.config.js 中的 entry 部分如下：
entry: {
javaScript: './js/client.js',
html: './index.html'
}

这是运行 npm run dev 后的结果

输出

我希望这能帮到你，如果我回答了你的问题，请标记一下。谢谢。