nodejs reactjs和webpack，configuration是错误的，但是什么？
我知道有一大堆的资源描述了这个设置，我尝试了几种方法，但是它的速度正在发生变化，所以我的谷歌示例已经过时了 – 这里
package.json { "name": "scoreboard", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.3.15", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babelify": "^7.2.0", "react": "^0.14.3", "react-dom": "^0.14.3", "webpack": "^1.12.9" } } 这是我的webpack.config.js
module.exports = { context: __dirname + "/app", entry: "./main.js", output: { filename: "main.js", path: __dirname + "/dist" }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loaders: ["babel-loader"], query: { presets: ["react", "es2015"] } } ] } }
目录结构
app - greeting.js - main.js dist node_module package.json webpack.config.js
greeting.js的内容
import React from "react"; export default React.createClass({ render: function () { return ( <div className="greeting"> Hello {this.props.name}! </div> ); }, });
main.js的内容
import React from "react"; import Greeting from "./greeting"; React.render( <Greeting/>, document.body );
但是当我跑步
$ webpack Hash: 553345561044745134b3 Version: webpack 1.12.9 Time: 2573ms + 1 hidden modules ERROR in ./main.js Module build failed: SyntaxError: /Users/kristiannissen/Documents/js/scoreboard/app/main.js: Unexpected token (5:8) 3 4 React.render( > 5 <Greeting/>, ^ 6 document.body 7 ); 8
从我可以告诉<Greeting/>没有按预期呈现。 要安装它，我运行npm install –save react react-dom babelify babel-preset-react –save-dev
更新添加查询到webpack.config.js但运行webpack我现在得到这个
$ webpack .../scoreboard/node_modules/webpack-core/lib/LoadersList.js:54 if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list");
仍然不放弃我所希望的方式
更新将webpack.config.js更改为
module.exports = { context: __dirname + "/app", entry: "./main.js", output: { filename: "main.js", path: __dirname + "/dist" }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query: { presets: ["react", "es2015"] } } ] } }
并安装提到的模块，这是twerking！ 我的问候文件中有一个错字，返回函数不应该使用{}，而是（）
完整的package.json
{ "name": "scoreboard", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.3.15", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babelify": "^7.2.0", "react": "^0.14.3", "react-dom": "^0.14.3", "webpack": "^1.12.9" } }
你需要添加babel-preset-react你安装到webpackconfiguration。 您可能还需要将“loaders”属性更改为“loader”，并将“es2015”预设添加到查询数组中，因为您也已经安装了该预置。
loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query: { presets: ['react', 'es2015'] } } ]
你遇到的第一个问题是Babel无法parsing和转换JSX语法。
安装babel-preset-react解决了这个问题，通过查询对象configurationBabel的方式是有效的。
但是，当使用query : { }您必须定义一个加载器（单数）而不是一个加载器（复数）数组。 这是最后一个错误信息告诉你的。
用loader: "babel-loader"replaceloaders: ["babel-loader"] loader: "babel-loader"应该修复你的问题。