ReferenceError：不明なプラグイン "react-html-attrs"が指定されました

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インストールしてみてくださいバベル・プラグインを反応し-HTML-attrsには

を--save、あなたはそれでいる間、 はNPMバベルをインストール$ -plugin-transform-class-properties --save

何らかの理由で、エラーメッセージで名前が短くなります。 これらは、htmlのJSXコードとして貼り付けられたプロセス属性とクラス名のヘルプです。構文はJSXに適合させる必要があります。

は今、私はあなたのpackage.json（tldr）でこれらを参照してください、https://github.com/insin/babel-plugin-react-html-attrs/blob/master/README.md

おっとを参照してください。何とかこれらのエラーは、npmのインストールを行うことで私のために修正されました。

Answer 2

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コマンドを実行したときに、私は次のような結果だ：

ハッシュ：WebPACKの1.15.0
時間：2186ms 資産規模チャンクチャンク名
クライアント
バージョンc323a36a23de43f8c0cfを。 min.js 1.76 MB 0 [放出]メイン
+ 163個の隠しモジュール

次に、npm run dev
としてのパッケージ。JSON以下のようにマッピングされたスクリプト：これはnpm run devを実行した後の結果である
entry: {
javaScript: './js/client.js',
html: './index.html'
}

：

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

Iはまた、以下のようにwebpack.config.jsentryセクション修飾しました

output

私はあなたの質問にお答えしたら、親切にそれを記入してください。おかげさまで